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

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

您遇到的问题是，按值复制与按引用复制之间的区别。

特别是这行代码：

this.name = ShareService.name;

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

如果您确实想要共享完全相同的值，则需要引用对象，而不是原始值。 如果需要，您可以直接绑定到ShareService实例：

this.shareService = ShareService;

ng-model="ctrl2.shareService.name"

但这让我觉得有点好笑。

另一种方法是在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"

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

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 个解决方案

解决方案1
2 已采纳 2015-11-27 02:11:17

解决方案2
1 2015-11-27 02:19:45

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-11-27 02:11:17

解决方案2 1 2015-11-27 02:19:45

解决方案1
2 已采纳 2015-11-27 02:11:17

解决方案2
1 2015-11-27 02:19:45