Угловое JS - переменное обновление с интервалом

Угловые модели работают с setIntervaL?

Вот пример.. если у меня есть

<p>{{number}}</p>
<button ng-click="testFunc()">TEST</button>

По какой-то причине он обновляет WITHOUT setInterval, но это не так:

scope.testFunc = function(){
    setInterval(function(){
        scope.number--;
    },1000);
};

Без setInterval число будет обновлять каждый клик, но с setInverval он не будет обновляться непрерывно. Если я нажимаю его каждые 5 секунд, он перепрыгивает кучу номеров (так что он работает в фоновом режиме, но представление не обновляется).

Ответ 1

Что происходит, так это то, что вы используете setInterval который находится за пределами "Angular world", поэтому он не обновляет DOM. У вас есть два варианта: один намного лучше, чем другой.

Используйте $interval. Это точно так же, как setInterval за исключением части Углового мира, поэтому эти изменения будут обновлять ваше представление (обязательно передайте $ interval в свою директиву).

scope.testFunc = function(){
    $interval(function(){
        scope.number--;
    },1000);
};

Второй вариант - вызвать apply() в вашем текущем коде, чтобы начать цикл дайджеста, не делайте этого, поскольку, поскольку есть лучший вариант.

Ответ 2

См. Документацию по интервалу в угловом js Интервал с угловым JS

Вы не должны использовать $ digest для работы с интервалом. См. Следующий код:

HTML

<div ng-app ng-controller="ApplicationController">   
    <pre>Number: {{ number }}</pre>
    <button ng-click="testTimer()">Test Timer</button>
</div>

function ApplicationController($scope,$interval) {

    $scope.number = 99999;

    $scope.testTimer = function() {
        $interval(function() {
            $scope.number--;
        }, 100);
    };  
}

См. Этот пример в действии здесь

Ответ 3

Угловой поставляется с красивой оберткой для setInterval. Используйте его почти так же.

https://docs.angularjs.org/api/ng/service/$interval

Ответ 4

$ interval работает, вы можете узнать больше об этом: https://docs.angularjs.org/api/ng/service/ $ interval

как дополнительное примечание, вместо использования {{ number }} попробуйте использовать <p ng-model="number"></p> чтобы отобразить ваше значение.

Ответ 5

Пробовал использовать $ interval, но он вернулся Ошибка: $ interval не определен.... BUT $ digest() работал:

scope.testFunc = function(){
    setInterval(function(){
        scope.number--;
        scope.$digest();
    },1000);
};