如何通过使用angularjs延迟更改值？

我创build了基于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块中，并将任何exception委托给$ 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);