使用AngularJS的setInterval()更新每个刻度中的变量

Question

我试图使用setInterval（）在JS中每x秒计算一个变量，并在视图中以Angular的方式绑定该变量。问题是，在模型中，var是向上计数的，但只要我停止Interval，进度就会显示出来。如何在每次勾选时更新视图中的var？

<span>{{number}}</span> 

和：

$scope.number = 0;
$scope.interval;
$scope.run = function(){
    $scope.interval = setInterval(function(){
        $scope.number++;
    }, 1000);
};
$scope.stop = function(){
    clearInterval($scope.interval);
}

Fiddle

Answer 1

您应该使用Angular的setInterval实现，称为$interval。

这不仅可以确保回调中的任何代码调用摘要，还可以帮助您轻松测试代码：

$scope.run = function() {
    $scope.interval = $interval(function() {
        $scope.number++;
    }, 1000);
};
$scope.stop = function() {
    $interval.cancel($scope.interval);
};

我也会避免将interval变量附加到$scope。我看不出你的视图需要注意它的任何原因。控制器范围中的私有var interval就足够了。

Answer 2

var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function ($scope, $interval) {
    $scope.number = 0;
    $scope.run = function (){
        $scope.interval = $interval(function(){ 
            $scope.number++;
        }, 1000);
    };
    $scope.stop = function() {
        $interval.cancel($scope.interval);
    };

})；