[英]angularjs: controllers not sharing data, using a service
I have these controllers and service: 我有这些控制器和服务:
angular.module('myApp', []);
angular.module('myApp').factory('ShareService', function() {
var delivery = {};
delivery.name = "";
delivery.setName = function(n){
delivery.name = n;
}
return delivery;
});
angular.module('myApp').controller('controller2', function (ShareService) {
this.name = ShareService.name;
});
angular.module('myApp').controller('controller1', function (ShareService) {
this.setName = function (){
ShareService.setName ("any name");
};
});
and the html: 和HTML:
<body ng-controller="controller1 as ctrl1">
<button ng-click="ctrl1.setName()">Click Me</button>
<div ng-controller="controller2 as ctrl2">
<input type="text" ng-model="ctrl2.name">
</div>
</body>
Why clicking the button doesn't update the input with the text "any name"
What's wrong here? 为什么单击该按钮不会使用文本
"any name"
更新输入这里有什么问题? I have no clue. 我没有任何线索。 Thanks!
谢谢!
You are running into an issue with the difference between copied by value vs copied by reference. 您遇到的问题是, 按值复制与按引用复制之间的区别。
Particularly, this line of code: 特别是这行代码:
this.name = ShareService.name;
Means you are actually copying the value of ShareService.name
but not the actual reference to it because it is a primitive. 意味着您实际上正在复制
ShareService.name
的值,但不是ShareService.name
的实际引用,因为它是一个原语。
If you really want to share the exact same value, then you need a reference to an object, instead of the primitive value. 如果您确实想要共享完全相同的值,则需要引用对象,而不是原始值。 You could bind directly to the
ShareService
instance if you wanted: 如果需要,您可以直接绑定到
ShareService
实例:
this.shareService = ShareService;
ng-model="ctrl2.shareService.name"
But that feels a little funny to me. 但这让我觉得有点好笑。
Another alternative is to create a "model" object of some kind on your ShareService
and copy a reference to that into your controller instead. 另一种方法是在
ShareService
上创建某种“模型”对象, ShareService
的引用复制到控制器中。
var delivery = {
shared: {name:""}
};
delivery.setName = function(n){
delivery.shared.name = n;
}
return delivery;
this.shared = ShareService.shared;
ng-model="ctrl2.shared.name"
This would all have the effect of making sure that the bound property is always pointing to the same shared value, and not just a copy. 这将确保绑定属性始终指向相同的共享值,而不仅仅是副本。
Here is a plunker with a working example: http://plnkr.co/edit/i5jPFl717RtkMw0MwVTZ?p=preview 这是一个带有工作示例的plunker: http ://plnkr.co/edit/i5jPFl717RtkMw0MwVTZ?p = preview
The thing is that this.name = ShareService.name;
问题是
this.name = ShareService.name;
is copying by value and not by reference. 是按值而不是按引用复制。
A workaround could be to define your delivery.name
as an Object and not as a string. 解决方法可能是将
delivery.name
定义为Object而不是字符串。 So that you can copy it by reference. 这样你就可以通过引用复制它了。
app.factory('ShareService', function() {
var delivery = {};
delivery.name = {
value: "default"
};
delivery.setName = function(n) {
delivery.name.value = n;
}
return delivery;
});
app.controller('controller1', function(ShareService) {
this.setName = function() {
ShareService.setName("modified");
};
});
app.controller('controller2', function(ShareService) {
this.name = ShareService.name;
});
Then you could use it like this: 然后你可以像这样使用它:
<div ng-controller="controller2 as ctrl2">
<input type="text" ng-model="ctrl2.name.value">
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.