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

Question

我需要在两个控制器（控制器A和控制器B）之间共享数据。我有一个服务来分享数据。然而，如果我从视图中使用“ng-model = shared.id”来设置共享变量的值，这可以工作，并且controllerB可以看到controllerA设置的值。如果我在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

您的代码将更改服务值，不会有任何问题。但问题是，controllerB不会意识到价值变化，因为没有被称为$ 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

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

检查下面的例子，使用$broadcast函数$rootScope来调用所有子作用域上的事件（例如共享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>