角度模型是否适用于setIntervaL?
这是一个例子..如果我有
<p>{{number}}</p>
<button ng-click="testFunc()">TEST</button>
出于某种原因,它更新了没有setInterval,但是像这样它没有:
scope.testFunc = function(){
setInterval(function(){
scope.number--;
},1000);
};
如果没有setInterval,则每次单击都会更新数字,但使用setInverval时,它不会连续更新。如果我每隔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包装器。几乎以同样的方式使用它。
答案 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);
};