Javascript 角度JS-带间隔的变量更新

角度模型是否适用于setIntervaL

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

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

---

如果没有setInterval，则每次单击数字都会更新，但如果使用setInverval，则不会持续更新。如果我每5秒钟点击一次，它就会跳上一堆数字（因此它在后台运行，但视图没有更新）。

Angular为setInterval提供了一个很好的包装。使用方法几乎相同

---

发生的事情是，您使用的是

setInterval

，它不属于“Angular的世界”，因此不会更新DOM。你有两个选择，一个比另一个好得多

使用

$interval

。它与

setInterval

类似，只是它是角度世界的一部分，因此这些更改将更新您的视图（请确保将$interval传递到您的指令中）

---

第二个选项是对当前代码调用apply（）以启动摘要循环，但不要这样做，因为还有更好的选项。

$interval有效您可以在：$interval了解更多信息

---

请进一步注意，不要使用

{{number}

而是尝试使用

来显示您的值

尝试使用$interval，但返回错误：$interval未定义。。。。但是$digest（）起了作用：

---

请参阅文档以了解角度js中的间隔

您不需要使用$digest来处理interval。请参阅下面的代码：

HTML

---

请参阅

中的此示例，尝试使用$interval，但返回错误：$interval未定义。。。。但是$digest（）起作用了是的。就像我提到的，您必须将$interval传递给控制器。angular.module（'myCtrl'，function（$scope，$interval）…是否已注入控制器？myApp.controller（function（$scope，$interval）{…}）否！由于我在回答中提到的原因，请不要这样做。它不起作用的原因是因为尚未注入$interval

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

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

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

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