AngularJS视图未在模型更改时更新

73

我试图弄清楚Angular的工作原理，并在模型更改时无法更新视图。

的HTML

<div ng-app="test">  
        <p ng-controller="TestCtrl">  
            {{testValue}}  
        </p>  
    </div>

JS

var app = angular.module('test', []);

    app.controller('TestCtrl', function ($scope) {
       $scope.testValue = 0;

        setInterval(function() {
            console.log($scope.testValue++);
        }, 500);
    });

http://jsfiddle.net/N2G7z/

有任何想法吗？

javascript angularjs

— shunryu111
source

4

除了下面的答案，如果您仍想使用settimeout，则必须使用scope。$ apply（）

— Ajay Beniwal

6

$ scope。$ apply（）是我需要的。用户交互后，我正在处理的项目中的模型将更新。我实际上并没有使用超时或间隔，但是很高兴知道将来如何在角度中使用它们。感谢您的回答！

— shunryu111 2013年

这是一篇有趣的文章，在其中您将了解有关$ digest周期的更多信息sitepoint.com/understanding-angulars-apply-digest

— 华盛顿先生，

122

正如上面提到的Ajay beniwal一样，您需要使用Apply来开始消化。

var app = angular.module('test', []);

app.controller('TestCtrl', function ($scope) {
   $scope.testValue = 0;

    setInterval(function() {
        console.log($scope.testValue++);
        $scope.$apply() 
    }, 500);
});

— 鲍里斯·伊凡诺夫（Boris Ivanov）
source

2

Diego Vieira的答案更好。经验法则是：只要有可能，就使用Angular的提供者/服务，他们自己进行申请。

— JuanXarg

在我写评论时，没有任何$ intervals它只是setInterval btw的包装器。同样，它也不是那么保存外观：阅读更多：docs.angularjs.org/api/ng/service/$interval

— Boris Ivanov

那是一个hack，angular有它自己的计时器，应该使用$ interval来更新监视程序

— Anton Savchenko

在上方阅读我的评论

— Boris Ivanov

此方法使用不安全，因为它将在给定的间隔内继续更新模型...

— Vijay Sankhat

37

只需使用$ interval

这是修改您的代码。 http://plnkr.co/edit/m7psQ5rwx4w1yAwAFdyr?p=preview

var app = angular.module('test', []);

app.controller('TestCtrl', function ($scope, $interval) {
   $scope.testValue = 0;

    $interval(function() {
        $scope.testValue++;
    }, 500);
});

— 迭戈·维埃拉（Diego Vieira）
source

29

setTimout在角度之外执行。您需要使用$timeout服务才能正常工作：

var app = angular.module('test', []);

    app.controller('TestCtrl', function ($scope, $timeout) {
       $scope.testValue = 0;

        $timeout(function() {
            console.log($scope.testValue++);
        }, 500);
    });

原因是角度绑定中的双向绑定使用脏检查。这是一篇不错的文章，介绍了有关angular的脏检查的信息。 $scope.$apply()开始一个$digest周期。这将应用绑定。为您$timeout处理$apply，因此建议您在使用超时时使用。

本质上，绑定发生在$digest周期中（如果值看起来不同）。

— 戴文·特里翁（Davin Tryon）
source

8

不要使用 $scope.$apply()已使用的Angular，它可能会导致此错误

$ rootScope：inprog操作已在进行中

如果您使用两次，请使用$timeout或间隔

— 安娜·卡罗琳·费雷拉
source