Angular JS - 带间隔的变量更新

时间:2014-04-23 00:08:51

标签: javascript angularjs

角度模型是否适用于setIntervaL?

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

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

出于某种原因,它更新了没有setInterval,但是像这样它没有:

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

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

5 个答案:

答案 0 :(得分:21)

正在发生的事情是您正在使用setInterval,这是在&#34; Angular的世界之外&#34;所以它没有更新DOM。你有两个选择,一个比另一个好很多。

使用$interval。它就像setInterval一样,除了它是Angular世界的一部分,因此这些更改将更新您的视图(确保将$ interval传递给您的指令)。

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

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

答案 1 :(得分:6)

请参阅角度js Interval with 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);
    };  
}

请参阅action here

中的此示例

答案 2 :(得分:1)

Angular附带了一个很好的setInterval包装器。几乎以同样的方式使用它。

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

答案 3 :(得分:0)

$ interval工作肯定你可以在https://docs.angularjs.org/api/ng/service/ $ interval

了解更多信息

作为进一步说明,而不是使用{{ number }}尝试使用<p ng-model="number"></p>来显示您的价值。

答案 4 :(得分:-1)

尝试使用$ interval但它返回错误:$ interval未定义....但$ digest()工作:

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