Question

我希望在一段时间延迟后通过控制器更改绑定数据值，但不能正常工作，以下是一个非常简单的代码：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script>
var app=angular.module('app',[]);
app.controller('controller',['$scope',function($scope){
    $scope.color='red';
    setTimeout(function(){
        $scope.color='blue';
    }, 0);
}])
</script>
</head>
<body ng-app="app">
<div ng-controller="controller">
{{color}} <input ng-model="color">
</div>
</body>
</html>

Answer 1

不要使用setTimeout(function(){})。改为使用$timeout（Angular way）

app.controller('controller',['$scope','$timeout', function($scope, $timeout){
    $scope.color='red';
    $timeout(function(){
        $scope.color='blue';
    });
}])

同样对于0毫秒，您可以省略延迟值

开始时$scope.color的值为'red'。 setTimeout不会触发摘要周期，因此当您将color更改为blue时，它将不起作用。

$timeout 触发摘要周期，因此在HTML {{color}}中我们会看到blue

Answer 2

  $timeout(function(){
    $scope.color='blue';
  }, 10000);

OR

  $timeout(function(){
    $scope.color='blue';
  }, 20000);

使用第二个参数作为毫秒。你可以放任何你想要的价值。如果您想在使用10000后等待1秒钟，等等。

AngularJS在时间延迟后更改边界数据值

2 个答案: