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>