Question

我有这些控制器和服务：

  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");
    };
  });

和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>

为什么单击该按钮不会使用文本"any name"更新输入？这里有什么问题？我没有线索。谢谢！

Answer 1

您遇到了copied by value vs copied by reference.

之间存在差异的问题

特别是这行代码：

this.name = ShareService.name;

意味着您实际上是在复制ShareService.name的值，而不是对它的实际引用，因为它是一个原语。

如果你真的想要共享完全相同的值，那么你需要一个对象的引用，而不是原始值。如果您愿意，可以直接绑定到ShareService实例：

this.shareService = ShareService;

ng-model="ctrl2.shareService.name"

但这让我觉得有点好笑。

另一种方法是在ShareService上创建某种“模型”对象，并将其引用复制到控制器中。

var delivery = {
   shared: {name:""}
};

delivery.setName = function(n){
  delivery.shared.name = n;
}
return delivery;

this.shared = ShareService.shared;

ng-model="ctrl2.shared.name"

这样做的结果是确保绑定属性始终指向相同的共享值，而不仅仅是副本。

Answer 2

这是一个带有工作示例的plunker：http://plnkr.co/edit/i5jPFl717RtkMw0MwVTZ?p=preview

问题是this.name = ShareService.name;是按值而不是通过引用进行复制。

解决方法可能是将delivery.name定义为Object而不是字符串。这样你就可以通过引用复制它了。

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;
});

然后你可以像这样使用它：

<div ng-controller="controller2 as ctrl2">
    <input type="text" ng-model="ctrl2.name.value">
  </div>

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

2 个答案: