如何使用angularjs在延遲后改變值？

Question

我創建了基於angularjs基本應用程序

HTML：

<div ng-app="miniapp">
<div ng-controller="Ctrl">
    My name is 
    <input type="text"/>   
    Val: {{val}}
    <br/>
    <button ng-disabled="val">Submit</button>        
</div>    

JS：

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

var glob;
function Ctrl($scope) {      
    glob = $scope;    
     $scope.val = false;

     window.setTimeout(function() {
            $scope.val = true;
        }, 3000);             
}

 window.setTimeout(function() {
            glob.val = true;
        }, 3000); 

正如你所看到的那樣，我嘗試在3秒后用2種方式將val改為true ，但沒有人為我工作。 真奇怪。 我錯過了什么？

實際上我在嘗試從Ajax獲得響應后嘗試更改值，但是假設應該是同樣的問題。

謝謝，

這是我的例子： http ： //jsfiddle.net/6uKAT/20/

Answer 1

嘗試使用： $timeout

Angular的window.setTimeout包裝器。 fn函數被包裝到try / catch塊中，並將任何異常委托給$ exceptionHandler服務。

$timeout(fn[, delay][, invokeApply]);

更新小提琴

JavaScript的

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

function Ctrl($scope, $timeout) {  
     $scope.val = false;
     $timeout(function(){$scope.val = true}, 3000);       
} 

Answer 2

您正在更改范圍之外的范圍（在超時內）。
所以你應該使用$timeout ..否則你必須使用$scope.$apply()

$timeout(function() {
    $scope.val = true;
}, 3000); 

http://jsfiddle.net/6uKAT/21/

對於超時使用$timeout ，它將為您調用$scope.$apply() 。
同樣，對於ajax使用$http 。

如果你不能使用這些，那么你必須調用$scope.$apply()你自己：

 window.setTimeout(function() {
     $scope.$apply(function() {
        $scope.val = true;
     });
 }, 3000);