javascript - angularjs中多个controller如何监听服务变化

Question

RT
我注册了一个服务，并创建了多个controller，这样多个controller就能共享定义的服务了。
但是服务变更的时候，我想触发controller的事件，如何做到呢？$watch好像不行！

数据分析师 · Answer

javascript - How do multiple controllers in angularjs monitor service changes - PHP Chinese website Q&A - javascript - How do multiple controllers in angularjs monitor service changes - PHP Chinese website Q&A

Take a look around and learn.

ringa_lee · Answer

你的代码里面很多地方是有问题的

$scope.generate = function() {
    $scope.Service = {
      id: '234'
    };
  }

这里用 $scope.Service 其实是在这个 controller 里面又加了一个 $scope.Service 这两个变量，它的 scope 是在 selectController 里面，是不会影响到 graphController 里面的，如下图：

代码可以改成这样

$scope.generate = function() {
    $scope.service.name = "jimmy";
  };

然后就是 $watch 这里的问题了，$watch 的值只是第一次传入的值，文档里面关于 $watch 是这样介绍的：$watch(watchFn, watchAction, deepWatch)，所以如果需要让它始终监视 service.id 的变化，则将 deepWatch 设置为 true:

$scope.$watch('service', function(newVal, oldVal) {
    if (newVal !== oldVal) {
      alert('SelectController value changed!');
    }
  }, true);

最后我把代码和起来了，大概就是这样，html：




  TEST
 



    

      
      
{{service.id}}
      
    

    
      
      
{{service.id}}

main.js：

var app = angular.module('myApp', []);

app.factory('Service', function () {
  return {id: "345", name: "teddy"};
});

app.controller('SelectController', function($scope, Service) {
  $scope.service = Service;

  $scope.$watch('service', function(newVal, oldVal) {
    if (newVal !== oldVal) {
      alert('SelectController value changed!');
    }
  }, true);


  $scope.generate = function() {
    $scope.service.name = "jimmy";
  };
});

app.controller('GraphController', function($scope, Service) {
  $scope.service = Service;
  $scope.$watch('service', function(newVal, oldVal) {
    if (newVal !== oldVal) {
      alert("GraphController changed");
    }
  }, true);
});