1

我尝试使用 AngularJs 创建一个计时器，但是当我在 setInterval 方法中增加 timerCount 时，值会发生变化，但视图不会使用新值更新。当我检查控制台日志时，我发现 timerCount 会增加，如果我再次单击该按钮， timerCount 会获取视图中的当前值。如何使视图每秒更改一次？

这是html：

<p>timer count: {{timerCount}}</p>
  <button ng-click="startTimer()">start timer</button>

和控制器：

var app=angular.module('examApp',[]);
    app.controller('examCtrl',function($scope){

        $scope.timerCount=0;
        $scope.startTimer=function(){
            setInterval(function(){
                console.log($scope.timerCount);
                $scope.timerCount++;
            },1000)
        }
    })

http://plnkr.co/edit/CScdb8QFSFpKR7WJWuQJ?p=preview

4

2 回答 2

3

任何在角度上下文之外更新角度范围的函数variable/bindings都不会使用角度来运行摘要循环，因此绑定不会在 HTML 上得到更新。

在这里，您正在使用setInterval（这不会启动角度来运行摘要循环）这是异步运行的原生 JavaScript 函数，并且您正在尝试从此函数更新范围值。您应该使用$interval而不是使用setInterval.

基本上$interval服务setInterval在内部使用，但回调函数已被包裹在$rootScope.$evalAsync其中，在每个时间间隔为您运行摘要循环。

代码

app.controller('examCtrl',function($scope, $interval){

    $scope.timerCount=0;
    $scope.startTimer=function(){
        $interval(function(){
            console.log($scope.timerCount);
            $scope.timerCount++;
        },1000)
    }
});

演示 Plunkr

于 2016-01-03T20:19:44.077 回答
0

与 Pankaj 的回答一起，您也可以使用它，因为当使用纯 js 和 Angular 时，您需要使用$apply方法，例如

$scope.startTimer=function(){
        setInterval(function(){
            console.log($scope.timerCount);
            $scope.timerCount++;
            $scope.$apply();
        },1000)
    }

然后它将按预期工作。

于 2016-01-03T20:38:58.350 回答