AngularJS не обновляет изменения модели
Я пытаюсь выяснить, как работает Angular, и у меня возникают проблемы с обновлением моего представления при изменении модели.
HTML
<div ng-app="test">
<p ng-controller="TestCtrl">
{{testValue}}
</p>
</div>
JS
var app = angular.module('test', []);
app.controller('TestCtrl', function ($scope) {
$scope.testValue = 0;
setInterval(function() {
console.log($scope.testValue++);
}, 500);
});
http://jsfiddle.net/N2G7z/
любые идеи?
Ответы
Ответ 1
Как упоминалось выше в Ajay beniwal, вам необходимо использовать Apply для начала пищеварения.
var app = angular.module('test', []);
app.controller('TestCtrl', function ($scope) {
$scope.testValue = 0;
setInterval(function() {
console.log($scope.testValue++);
$scope.$apply()
}, 500);
});
Ответ 2
Просто используйте $interval
Вот ваш код изменен.
http://plnkr.co/edit/m7psQ5rwx4w1yAwAFdyr?p=preview
var app = angular.module('test', []);
app.controller('TestCtrl', function ($scope, $interval) {
$scope.testValue = 0;
$interval(function() {
$scope.testValue++;
}, 500);
});
Ответ 3
setTimout
выполняется за пределами angular. Для этого вам необходимо использовать службу $timeout
:
var app = angular.module('test', []);
app.controller('TestCtrl', function ($scope, $timeout) {
$scope.testValue = 0;
$timeout(function() {
console.log($scope.testValue++);
}, 500);
});
Причина в том, что двусторонняя привязка в angular использует грязную проверку. Это хорошая статья, чтобы прочитать грязную проверку angular. $scope.$apply()
запускает цикл $digest
. Это применит привязку. $timeout
обрабатывает $apply
для вас, поэтому рекомендуется использовать эту функцию при использовании тайм-аутов.
По существу, привязка происходит во время цикла $digest
(если значение считается другим).
Ответ 4
Не использовать $scope.$apply()
angular уже использует его, и это может привести к этой ошибке
$rootScope: inprog Действие уже выполнено
если вы используете дважды, используйте $timeout
или интервал