javascript - angularjs路由 - angularjs計算式



AngularJS視圖未更新模型更改 (3)

我正在試圖弄清楚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

setTimout在angular之外執行。 您需要使用$timeout服務才能工作:

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

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

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

原因是角度的雙向綁定使用臟檢查。 這是一篇關於角度臟檢查的好文章$scope.$apply()啟動$digest週期。 這將應用綁定。 $timeout處理$apply for you,因此它是使用超時時使用的推薦服務。

本質上,綁定發生在$digest循環期間(如果看到值不同)。


Answer #2

不要使用$scope.$apply() angular已經使用它,它可能導致此錯誤

$ rootScope:inprog Action已在進行中

如果你使用兩次,請使用$timeout或interval


Answer #3

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




angularjs