角度$範圍變量更新但不顯示

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/