Обновлять переменную в каждом тике, используя setInterval () с AngularJS

0

Я пытаюсь подсчитать переменную каждые 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);
}

скрипка

Теги:

2 ответа

3
Лучший ответ

Вы должны использовать угловую реализацию setInterval именем $ interval.

Это не только гарантирует, что любой код в обратном вызове вызывает дайджест, но он также поможет вам легко протестировать ваш код:

$scope.run = function() {
    $scope.interval = $interval(function() {
        $scope.number++;
    }, 1000);
};
$scope.stop = function() {
    $interval.cancel($scope.interval);
};

Я бы также избегал прикреплять переменную interval к области $scope. Я не вижу причин, по которым ваш взгляд должен был бы знать об этом. var interval в области контроллера будет достаточно.

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

});

Ещё вопросы

Сообщество Overcoder
Наверх
Меню