Я пытаюсь подсчитать переменную каждые x секунд в JS, используя setInterval(), и покажу ее в моем представлении, привязывая эту переменную Угловым способом. Проблема в том, что в модели счетчик подсчитывается, но прогресс показывается только после прекращения интервала. Как я могу обновить var в представлении на каждом тике?
<span>{{number}}</span>
а также:
$scope.number = 0;
$scope.interval;
$scope.run = function(){
$scope.interval = setInterval(function(){
$scope.number++;
}, 1000);
};
$scope.stop = function(){
clearInterval($scope.interval);
}
Вы должны использовать угловую реализацию setInterval
именем $ interval.
Это не только гарантирует, что любой код в обратном вызове вызывает дайджест, но он также поможет вам легко протестировать ваш код:
$scope.run = function() {
$scope.interval = $interval(function() {
$scope.number++;
}, 1000);
};
$scope.stop = function() {
$interval.cancel($scope.interval);
};
Я бы также избегал прикреплять переменную interval
к области $scope
. Я не вижу причин, по которым ваш взгляд должен был бы знать об этом. var interval
в области контроллера будет достаточно.
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function ($scope, $interval) {
$scope.number = 0;
$scope.run = function (){
$scope.interval = $interval(function(){
$scope.number++;
}, 1000);
};
$scope.stop = function() {
$interval.cancel($scope.interval);
};
});