У меня есть два контроллера и завод. Я ввожу завод и контроллер в главный контроллер, вот фрагменты кода ниже:
Фабрика:
app.factory('TallyFactory', function(){
return {
correct: 0,
incorrect: 0
};
});
TallyController, который принимает TallyFactory:
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, прислушиваясь к изменениям "баллов".
Когда я запускаю функцию addTally из моего MainController с помощью ng-click, он меняет значение моего Factory Object (TallyFactory). Поскольку произошли изменения, и я специально создал наблюдателя на моем TallyController ($ scope.scores), не следует запускать цикл дайджеста и обновлять консоль с новым значением моего TallyFactory?
Кроме того, мой TallyController НЕ вложен в мой MainController, они отделены друг от друга (не 100% уверены, если это имеет значение).
Я не уверен, почему цикл Digest не запускается, поскольку TallyFactory изменил значения.
$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:
В то время как временная шкала прокрутчика в режиме глубокой $ будет выглядеть так:
scores
- мелкий объект).
У меня были некоторые сомнения относительно точной правильности ответа, но после копирования кода в фрагмент, который может быть запущен, я просто подтвердил здесь, что ответ ня является приемлемым.
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>
$scope.$watch('scores.correct', ...