Question

我需要在两个控制器（控制器A和控制器B）之间共享数据。我有一个服务来共享数据。如果我使用＆＃34; ng-model = shared.id＆＃34;设置共享变量的值，则控制器B可以看到控制器A设置的值。然而，从视角来看;如果我在controllerA中设置共享变量，那么controllerB就不会看到它。

     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循环将触发并且更改继续传送到controllerB。

您可以尝试以下方式，

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

当一个控制器在服务对象中更新共享数据时，另一个控制器无法自动识别它，必须有一些方法可以传达诸如＆＃34; 嘿，我＆＃39;已更新共享数据，如果有人正在使用它，请继续获取更新的数据 ＆＃34;，这可以通过使用$broadcast, $on, $emit函数在AngularJS中使用$scope函数来完成{1}}对象和$rootScope服务。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: