角JS -变量随时间间隔的更新。

Do angular models work with setIntervaL?

角模型对setIntervaL有效吗?

Here's an example.. if I have

这里有一个例子。如果我有

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

For some reason it updates WITHOUT setInterval, but like this it doesn't:

出于某种原因，它在没有setInterval的情况下进行更新，但就像这样:

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

Without setInterval the number will update every single click, but with setInverval it won't update continuously. If I click it every 5 seconds it'll jump a bunch of numbers up (so it's running in the background but the view isn't updating).

没有setInterval，这个数字将会更新每一次点击，但是setInverval将不会持续更新。如果我每5秒点击一次它就会跳转到一堆数字(所以它在后台运行，但视图没有更新)。

5 个解决方案

#1

What's happening is that you're using setInterval which is outside of "Angular's world" so it's not updating the DOM. You have two options, one is a lot better than the other.

现在的情况是，你使用的是setInterval它位于“角度的世界”之外，所以它不会更新DOM。你有两个选择，一个比另一个好得多。

Use $interval. It's just like setInterval except it's part of the Angular world, so those changes will update your view (be sure to pass $interval into your directive).

使用美元区间。它就像setInterval一样，只是它是角世界的一部分，所以这些更改将更新您的视图(确保将$interval传递到您的指令中)。

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

The second option is to call apply() on your current code to kick off a digest cycle, don't do that though since there is a better option.

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

#2

See the documentation for the interval in angular js Interval with Angular JS

关于有角的js区间和有角的js区间，请参阅文档

You don't to use the $digest to work with interval. See the code below:

您不应该使用$digest处理interval。看下面的代码:

HTML

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

See this example in action here

请参见这里的示例

#3

Angular comes with a nice wrapper for setInterval. Use it nearly the same way.

角有一个很好的setInterval的包装器。使用方法几乎相同。

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

https://docs.angularjs.org/api/ng/service/美元区间

#4

$interval works definitely you can learn more about it at: https://docs.angularjs.org/api/ng/service/$interval

$interval工作得很好，您可以在https://docs.angularjs.org/api/ng/service/$interval了解更多

as a further note, instead of using {{ number }} try using <p ng-model="number"></p> to show your value instead.

另外，不要使用{{{{{number}，而是使用

来显示你的值。

#5

-1

Tried using $interval but it returned Error: $interval is not defined.... BUT $digest() worked:

尝试使用间隔但它返回错误:美元区间没有定义....但是美元消化():

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

#1