AngularJS视图不更新模型更改

我想弄清楚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/

有任何想法吗？

Answer 1

正如上面提到的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); }); 

Answer 2

只需使用$ 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); }); 

Answer 3

setTimout在angular外执行。 你需要使用$timeout服务这个工作：

 var app = angular.module('test', []); app.controller('TestCtrl', function ($scope, $timeout) { $scope.testValue = 0; $timeout(function() { console.log($scope.testValue++); }, 500); }); 

原因是angular度中的双向绑定使用脏检查。 这是一个很好的文章来阅读有关angular度的脏检查。 $scope.$apply()启动$digest循环。 这将应用绑定。 $timeout处理$apply ，所以这是使用超时时使用的推荐服务。

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

Answer 4

不要使用$scope.$apply() angular已经使用它，并且可能导致这个错误

$ rootScope：inprog操作已在进行中

如果使用两次，请使用$timeout或interval