Question

我正在试图找出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);
    });

原因是角度的双向绑定使用脏检查。 This is a good article了解角度的脏检查。 $scope.$apply()开始$digest周期。这将适用于绑定。 $timeout为您处理$apply，因此在使用超时时使用它是推荐的服务。

基本上，绑定发生在$digest周期内（如果看到的值不同）。

Answer 4

请勿使用$scope.$apply() angular已使用它，否则可能会导致此错误

$ rootScope：inprog行动已在进行中

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

AngularJS视图未更新模型更改

4 个答案: