如何使用angularjs在延迟后改变值?

时间:2013-04-17 20:09:18

标签: javascript angularjs

我基于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秒后将val更改为true 2种方式,但没有人为我工作。真奇怪。我错过了什么吗?

实际上我尝试在从Ajax获得响应后更改值,但是假设应该是同样的问题。

谢谢,

以下是我的示例:http://jsfiddle.net/6uKAT/20/

2 个答案:

答案 0 :(得分:76)

尝试使用:$timeout

  

Angular的window.setTimeout包装器。 fn函数被包装   进入try / catch块并委托任何异常   $ exceptionHandler服务。

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

Updated Fiddle

<强>的JavaScript

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

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

答案 1 :(得分:27)

你正在改变范围以外的角度知道(在超时内) 因此,您应该使用$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);