javascript - 如何使用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); 

如您所见，我尝试通过 2 种方式在 3 秒后更改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

您正在对 Angular 所知道的范围之外的范围进行更改（在超时内）。
所以你应该使用$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);