0

我有两个控制器和一个工厂。我将工厂和控制器注入主控制器，下面是代码片段：

工厂：

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”函数时，它会更改我的工厂对象 (TallyFactory) 的值。由于发生了变化，并且我专门在我的 TallyController ($scope.scores) 上创建了一个观察程序，不应该触发摘要循环并且我的控制台更新为我的 TallyFactory 的新值吗？

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

我不确定为什么在 TallyFactory 更改值后没有触发摘要循环。

4

2 回答 2

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

观察特定的财产。和

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

留意他们所有人。

考虑使用深$watch

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

相反，如果scores属性可能包含对象。

与 deep 相比$watch，$watchCollection即使对于简单的浅层对象，也能显着提升性能。这是$watchCollection的分析器时间线：

$watchCollection 分析器时间线

虽然深度 $watch分析器时间线看起来像这样：

深度 $watch 分析器时间线

于 2015-08-20T02:15:41.127 回答
1

我对答案的确切正确性有些怀疑，但是在将您的代码复制到可以运行的代码段后，我刚刚在这里验证了 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>

于 2015-08-20T02:29:23.790 回答