为什么 Angular 摘要循环没有被调用？

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 添加了一个观察者，监听何时 "scores" 发生变化。

当我使用 ng-click 从我的 MainController 运行 "addTally" 函数时，它会更改我的工厂对象 (TallyFactory) 的值。由于发生了变化，并且我专门在我的 TallyController ($scope.scores) 上创建了一个观察者，难道不应该触发摘要周期并且我的控制台更新为我的 TallyFactory 的新值吗？

另外，我的 TallyController 没有嵌套在我的 MainController 中，它们彼此分开（不是 100% 确定这是否重要）。

我不确定为什么在 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:

的分析器时间线

虽然 deep $watch 探查器时间轴将如下所示：

Answer 2

我对答案的确切正确性有些怀疑，但在将您的代码复制到一个可以是运行的片段后，我刚刚在这里验证了 estus 的答案是可以接受的。

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>

为什么 Angular 摘要循环没有被调用？

Why is the Angular Digest Cycle not being called?

javascript

angularjs

angularjs-digest