為什么不調用角度消化循環？

Question

我有兩個控制器和一個工廠。 我正在將工廠和控制器注入主控制器，這是下面的代碼片段：

廠：

app.factory('TallyFactory', function(){

  return {
    correct: 0,
    incorrect: 0
  };

});

接受TallyFactory的TallyController：

app.controller('TallyController', function($scope, TallyFactory){    

  $scope.$watch('scores', function(newValue, oldValue){
    console.info('changed!');
    console.log('Old: ' + JSON.stringify(oldValue));
    console.log('New: ' + JSON.stringify(newValue));
  });

  $scope.scores = TallyFactory;
});

MainController接受TallyFactory並更改TallyFactory對象的值：

app.controller('MainController', function ($scope,TallyFactory) {

    $scope.addTally = function(){
    TallyFactory.correct++;
  }
});

請注意，在我的TallyController（第二個片段）中，我向$ scope添加了一個觀察者，監聽“分數”的變化。

當我通過ng-click從MainController運行“ addTally”函數時，它將更改我的Factory Object（TallyFactory）的值。 由於發生了更改，並且我專門在TallyController（$ scope.scores）上創建了一個觀察程序，因此不應該觸發摘要循環，並用TallyFactory的新值更新控制台嗎？

另外，我的TallyController不嵌套在我的MainController中，它們彼此獨立（不確定是否重要）。

我不確定為什么自從TallyFactory更改值后就不觸發摘要循環。

Answer 1

$scope.$watch('scores.correct', function(newValue, oldValue){ ... });

留意特定財產。 和

$scope.$watchCollection('scores', function(newValue, oldValue){ ... });

照顧他們。

考慮使用深層$watch

$scope.$watch('scores', function(newValue, oldValue){ ... }, true);

相反，如果scores屬性可能包含對象。

與深層的$watch相比， $watchCollection即使對於簡單的淺層對象也可以提供顯着的性能提升。 這是$ watchCollection的探查器時間軸：

雖然深入的$ watch分析器時間軸將如下所示：

Answer 2

我對答案的確切正確性有一些疑問，但是將您的代碼復制到可以運行的代碼段后，我在這里僅驗證了發情的答案是可以接受的。

 angular.module('app', []) .controller('TallyController', function($scope, TallyFactory){ $scope.scores = TallyFactory; $scope.$watch('scores', function(newValue, oldValue){ alert('changed!'); console.log('Old: ' + JSON.stringify(oldValue)); console.log('New: ' + JSON.stringify(newValue)); }, true); }) .factory('TallyFactory', function(){ return { correct: 0, incorrect: 0 }; }) .controller('MainController', function ($scope,TallyFactory) { $scope.addTally = function(){ TallyFactory.correct++; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <div ng-app='app'> <div ng-controller="TallyController"> {{scores}} </div> <div ng-controller="MainController"> <button ng-click="addTally()">Add Tally</button> </div> </div>