Angular 服务未更新控制器

Question

我在 angular 中使用控制器和服务。据我了解，在通过控制器之间的服务共享日期的情况下，我有责任更新服务，因为它没有范围。我在输入字段上设置了监视并在输入更改时更新了服务。为什么另一个控制器中的服务没有更新？它是一个单例并且有一个实例..不应该更新另一个控制器中的引用吗？我找到的唯一解决方案是添加一个手表来监听服务和模型的变化，但现在我每个控制器都有两个手表功能来监听两种方式。这个对吗？我觉得如果我更新服务，该值应该在另一个控制器中更新，因为所有内容都指向相同的值。

https://jsfiddle.net/86hry8a5/

  <div ng-controller="mainController as mainCtrl">
    <div>
      <input type="text" ng-model="mainCtrl.message" />
    </div>
    <div>
      {{mainCtrl.message}}
    </div>
  </div>
  <hr/>
  <div ng-controller="secondController as secondCtrl">
    <div>
      <input type="text" ng-model="secondCtrl.message" />
    </div>
    <div>
      {{secondCtrl.message}}
    </div>
  </div>

  .controller('mainController', function(mainService, $scope){
      var self = this;
      self.message = mainService.message;
      $scope.$watch(function(){return mainService.message}, function(){
          self.message = mainService.message;
      });
      $scope.$watch(function(){return self.message}, function(){
          mainService.message = self.message;
      });
  })

  .controller('secondController', function(mainService, $scope){
      var self = this;
      self.message = mainService.message;
      $scope.$watch(function(){return mainService.message}, function(){
          self.message = mainService.message;
      });
      $scope.$watch(function(){return self.message}, function(){
          mainService.message = self.message;
      });
  })

  .service('mainService', function(){
      var self = this;
      self.message = 'service';

  }
);

Answer 1

更新服务中的值不会自动更新第二个控制器中的值，因为第二个控制器不'watching'用于更改服务值。

为了实现您正在寻找的目标，您必须创建自己的 'watch'，就像您已经完成的那样。

但是，更好的方法是发出事件。每个控制器在更新服务中的值时都会发出一个事件。另一个控制器将监听此事件并更新它的本地副本。

像这样在输入框上使用ng-change：

  <input type="text" ng-model="mainCtrl.message" ng-change="mainCtrl.changeHandler()" />

发送和订阅事件的两个控制器中的控制器代码：

      self.changeHandler = function () {
        mainService.message = self.message;
        $rootScope.$broadcast('MAIN_SERVICE_VALUE_CHANGED');
      };
      $rootScope.$on('MAIN_SERVICE_VALUE_CHANGED', function () {
        self.message = mainService.message;
      });

Here is a working fork of your fiddle updated with event logic

Answer 2

Why does this only work with reference to an object? and not just a property in the service?

引用是指向内存中对象的实体。当一个函数 returns 一个 对象引用 时，每个控制器获得相同的指针。

对象的内容由所有控制器共享。内容的更改会被所有控制器看到。

使用 primitives 仅传输 value。所有控制器都看不到后续更改。

另见，JavaScript Pass Object as a Reference

Angular 服务未更新控制器

Angular services not updating controllers

reference

pass-by-reference

angularjs

angular-services