角度$ scope變量已更新但未顯示

Question

在下面的控制器中，$ scope.timer每秒鍾增加一次，但在視圖{{timer}}中不反映其內容。

myapp.controller('TimeCtrl', ['$scope', function($scope){
    $scope.timer = 0;
    setInterval(function(){
        $scope.timer = $scope.timer + 1;
        console.log($scope.timer);
    },1000);
}]);

我可以添加$scope.$apply();來解決它 計時器更新后為什么？ 為什么計時器不更新？

在這里提琴： http : //jsfiddle.net/wvxgzx76/1/

Answer 1

因為setInterval在$digest循環之外-而是使用Angulars $interval指令：

myapp.controller('TimeCtrl', ['$scope', '$interval', function($scope, $interval){
    $scope.timer = 0;
    $interval(function(){
        $scope.timer = $scope.timer + 1;
        console.log($scope.timer);
    },1000);
}]);

Answer 2

只需將您的代碼包裝到適用范圍內即可：

var myapp = angular.module('myapp', []);
myapp.controller('TimeCtrl', ['$scope', function($scope){
    $scope.timer = 0;
    setInterval(function(){
        $scope.$apply(function () {
            $scope.timer = $scope.timer + 1;
            console.log($scope.timer);
        });
    },1000);
}]);

或使用$ interval代替setInterval（我更喜歡這樣）：

var myapp = angular.module('myapp', []);
myapp.controller('TimeCtrl', ['$scope', '$interval', function($scope,$interval){
    $scope.timer = 0;
    $interval(function(){       
        $scope.timer = $scope.timer + 1;
        console.log($scope.timer);
    },1000);
}]);

http://jsfiddle.net/wvxgzx76/3/