简体   繁体   English

angularjs:控制器不使用服务共享数据

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM