angularjs 中的变量未更新

Question

我尝试使用 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

Answer 1

在 angular 上下文之外更新 angular 范围 variable/bindings 的任何函数都不会将 angular 与运行摘要循环联系起来，结果绑定不会'无法获得 HTML.

的更新

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

基本上 $interval 服务在内部使用 setInterval，但回调函数已包装在 $rootScope.$evalAsync 中，每个间隔为您运行s 摘要周期。

代码

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

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

Demo Plunkr

Answer 2

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

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

然后它将按预期工作。

angularjs 中的变量未更新

A variable in angularjs is not updated

javascript

setinterval

angularjs

angularjs-digest