当在另一个控制器上设置变量时，AngularJS 在控制器之间共享数据

Question

我需要在两个控制器（控制器 A 和控制器 B）之间共享数据。我有一个服务来共享数据。但是，如果我使用视图中的“ng-model=shared.id”设置共享变量的值，那么控制器B可以看到控制器A设置的值；如果我在控制器 A 中设置共享变量，则控制器 B 看不到它。

     app['controller']('controllerA', ['shared', function(shared){

          //ControllerB will not see this for some reason, unless I set
          //the value from the view using the ng-model=shared.id attribute.
          shared['id'] = "123";   

     }]);

     app['controller']('controllerB', ['shared', function(shared){

         this['someId'] = shared['id'];   

     }]);

Answer 1

您的代码将毫无问题地更改服务值。但问题是控制器 B 不会意识到值的变化，因为没有调用 $digest 循环。

当您更改 $scope 模型的值时，将触发 $digest 循环并将更改传递给控制器​​ B。

你可以尝试如下，

app['controller']('controllerA', ['$scope', 'shared', function($scope, shared){
          $scope.shared = shared;
          //ControllerB will not see this for some reason, unless I set
          //the value from the view using the ng-model=shared.id attribute.
          $scope.shared['id'] = "123";    // This will trigger the $digest cycle

     }]);

     app['controller']('controllerB', ['shared', function(shared){

         this['someId'] = shared['id'];   

     }]);

Answer 2

当共享数据从一个控制器更新服务对象时，另一个控制器无法自动知道它，必须有某种方式来传达，例如“嘿，我已经更新了共享数据如果有人在使用它，请继续并获取更新的数据”，这可以通过在 $scope 对象和 $rootScope 服务上使用 $broadcast, $on, $emit 函数使用 AngularJS 中的事件来完成.

检查以下示例，使用$rootScope 上的$broadcast 函数在所有子作用域上调用事件（例如共享ID 已更改）（即广播将向所有子作用域发送消息），对事件感兴趣的子作用域将使用 $on 函数监听该事件。

angular
  .module('demo', [])
  .controller('ControllerA', ControllerA)
  .controller('ControllerB', ControllerB)
  .factory('shared', shared);

ControllerA.$inject = ['$rootScope', 'shared'];

function ControllerA($rootScope, shared) {
  var vm = this;
  shared.id = 123;
  vm.id = shared.id;
  vm.updateId = updateId;

  function updateId(id) {
    shared.id = id;
    $rootScope.$broadcast('idChanged');
  }
}

ControllerB.$inject = ['$scope', 'shared'];

function ControllerB($scope, shared) {
  var vm = this;
  vm.id = shared.id;
  $scope.$on('idChanged', idChanged);

  function idChanged(event) {
    vm.id = shared.id;
  }
}

function shared() {
  var service = {
    id: 0
  };

  return service;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="ControllerA as ctrlA">
    Controller A: {{ctrlA.id}}
    <input type="text" name="id" ng-model="ctrlA.id" ng-change="ctrlA.updateId(ctrlA.id)" />
  </div>
  <div ng-controller="ControllerB as ctrlB">
    Controller B: {{ctrlB.id}}
  </div>
</div>