當我啓動函數時，ng-show不會改變

Question

有人可以解釋爲什麼spinerChange（）函數無法正常工作嗎？ http://jsfiddle.net/HB7LU/9907/

<div ng-controller="naujienosControler"> 
<button type="button" ng-click="spinerButtonChange()">Click Me!</button> 
<div class="spinner" ng-show="spiner" > 
    <div class="cube1"></div> 
    <div class="cube2"></div> 
</div> 
</div> 


var myApp = angular.module('myApp',[]); 
myApp.controller('naujienosControler', function ($scope) { 

var status = true; 
$scope.spiner = status; 
$scope.spinerButtonChange = function(){$scope.spiner = !$scope.spiner;};  
function spinerChange(){ 

setTimeout(function(){ alert("Why spiner dont disapear?????????"); $scope.spiner = false;},  3000); 
console.log($scope.spiner); 

}; 

spinerChange(); 
}); 

Answer 1

進樣和使用$timeout另一種選擇，因爲你想要的角度進行digest你做你的行動之後。

myApp.controller('naujienosControler', function ($scope, $timeout){ 
    $timeout(function(){ $scope.spiner = false; }, 3000}); 
} 

編輯（感謝lechariotdor）：它總是用「angularjs世界」包裝一個很好的做法，因爲它們運行的​​$apply方法，執行你的範圍和「同步」與發生變化的模型digest 。

Answer 2

因爲JavaScript setTimeout是未在angularjs範圍觸發事件，所以角不知道的範圍之外變化。

有一種方法可以實現的是如下使用$timeout代替setTimeout，這裏是DOC for $timeout

$timeout(function() { 
    $scope.spiner = !$scope.spiner; 
}, 3000) 

，不要忘記到控制器注入$timeout，

myApp.controller('naujienosControler', function ($scope, $timeout) {.... 

這裏是the update

---

存在使用$scope.$appy()here is a good tutorial about $apply()

function spinerChange(){  
    setTimeout(function(){ 
     $scope.spiner = !$scope.spiner; 
     $scope.$apply();  
    }, 3000); 
    };  
    spinerChange(); 
}); 

OR

function spinerChange(){  
    setTimeout(function(){   
     $scope.$apply(function() { 
      $scope.spiner = !$scope.spiner; 
     });  
    }, 3000); 
    };  
    spinerChange(); 
}); 

Answer 3

用途： -

$timeout(function(){ alert("Why spiner dont disapear?????????"); $scope.spiner = false;}, 500);