Angular JS - 带间隔的变量更新

Question

角度模型是否适用于setIntervaL？

这是一个例子..如果我有

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

由于某种原因,它更新没有setInterval,但像这样它不会:

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

如果没有setInterval,则每次单击都会更新数字,但使用setInverval时,它不会连续更新.如果我每隔5秒钟点击它就会跳过一堆数字(所以它在后台运行,但视图没有更新).

Answer 1

发生的事情是你正在使用的setInterval是"Angular的世界",因此它不会更新DOM.你有两个选择,一个比另一个好很多.

使用$interval.它就像setInterval它是Angular世界的一部分一样,所以这些更改将更新你的视图(确保将$ interval传递给你的指令).

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

第二个选项是调用当前代码上的apply()来启动摘要周期,不要这样做,因为有更好的选择.

Answer 2

请参阅文档,了解角度js 与Angular JS的间隔时间间隔

您不要使用$ digest来处理间隔.请参阅以下代码:

HTML

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

JS

function ApplicationController($scope,$interval) {

    $scope.number = 99999;

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

在此处查看此示例