AngularJS：如何在另一個控制器中使用觸發器更改一個控制器中的范圍

Question

我有兩個控制器和一個共享服務。 第一個控制器呈現一些文本。 其他Controller有一個按鈕，必須更改第一個控制器范圍和重新呈現文本（具有新值）

HTML

<div ng-controller="Controller1">
  Value is: {{object}}
</div>

<div ng-controller="Controller2">
  <button ng-click="changeValue()">Click to change Value</button>
</div>

JS

function Controller1($scope, mainServices) {
  $scope.object = mainServices.getValue();
};

function Controller2($scope, mainServices) {

 $scope.changeValue = function(){
   mainServices.getValue('Hello');
   console.log('button is pressed');
 };

};


testApp.factory('mainServices', function(){
 return {

    getValue: function(update) {
     var defaultValue = 'Hi';

     if( typeof(update)==='undefined') {    value = defaultValue;   }
       else {   value = update; }

    console.log('should be changed to', update);
    return value;
   }
}    
 });

關於Plunker http://plnkr.co/edit/IWBEvAfvLbzJ0UD2IqGB?p=preview

為什么這不起作用？ 如何告訴Angular注意變化？

Answer 1

編碼

好吧，我認為這不是最好的解決方案，但它可能是你的問題。 您必須在工廠的return語句之前創建一個對象，而不僅僅是更改值本身。

var obj = {}

然后你只需更改此對象的屬性：

if( typeof(update)==='undefined') { obj.val = defaultValue; }
    else {  obj.val = update;   }

並返回對象：

return obj;

另一個控制器可以不受影響，但是你必須改變你的html：你必須放入

{{object.val}}

為了聽取變化。

http://plnkr.co/edit/rjsrkbaQ8QyWGGFI9HYl?p=preview

為什么這樣做？

這很簡單：在javascript中，如果你調用一個原始返回值的函數就像一個字符串（是的，字符串可以是javascript中的原語），它只是這個原語的副本，所以用

$scope.object = mainServices.getValue();

你只需將值傳遞給$ scope.object，它不受getValue（）的其他調用的影響但是如果我們從getValue（）返回一個對象，我們得到對這個對象的引用。 因此，如果我們在getValue（）中對此引用對象進行更改，則angularjs將能夠注意到已更改的對象，因為它在兩個控制器中都被跟蹤。 因此我們必須一次又一次地引用同一個對象，但由於javascript支持閉包，這很容易。