0

2 つのコントローラーと 1 つの工場があります。ファクトリとコントローラーをメインコントローラーに挿入しています。以下のコードスニペットは次のとおりです。

工場：

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;
});

TallyFactory を受け入れ、TallyFactory オブジェクトの値を変更する MainController:

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

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

私の TallyController (2 番目のスニペット) に注目してください。$scope にウォッチャーを追加し、「スコア」がいつ変化するかをリッスンしています。

MainController から "addTally" 関数を ng-click で実行すると、Factory オブジェクト (TallyFactory) の値が変更されます。変更があり、特に TallyController ($scope.scores) にウォッチャーを作成したので、ダイジェスト サイクルがトリガーされ、コンソールが TallyFactory の新しい値で更新されるべきではありませんか?

また、私の TallyController は MainController にネストされておらず、互いに分離されています (それが問題かどうかは 100% わかりません)。

TallyFactory が値を変更したため、ダイジェスト ループがトリガーされない理由がわかりません。

4

2 に答える 2

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 に答える