Question

我在这里有2个输入，一个输入是使用范围设置值，另一个输入是在setTimeout之后设置值，但是我的问题是...它没有立即显示该值，我需要单击第二个输入以显示值。有什么解决办法吗？

angular.module('selectExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.firstInput = "click the second input";
    $scope.secondInput;
    
    function init(){
     setTimeout(function(){ 
     $scope.secondInput = "second input";
     }, 1000);
    } 
    init();
  }]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="selectExample" ng-controller="ExampleController">
<input type="text" ng-model="firstInput"></input>
<input type="text" ng-model="secondInput"></input>
</div>

Answer 1

使用$timeout代替setTimeout

angular.module('selectExample', [])
  .controller('ExampleController', ['$scope', '$timeout', function($scope, $timeout) {
    $scope.firstInput = "click the second input";
    $scope.secondInput;
    
    function init(){
     $timeout(function(){ 
       $scope.secondInput = "second input";
     }, 1000);
    } 
    init();
}]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="selectExample" ng-controller="ExampleController">
  <input type="text" ng-model="firstInput"></input>
  <input type="text" ng-model="secondInput"></input>
</div>

AngularJS通过提供自己的事件处理循环来修改常规JavaScript流。这将JavaScript分为经典和AngularJS执行上下文。只有在AngularJS执行上下文中应用的操作才能受益于AngularJS数据绑定，异常处理，属性监视等。

有关更多信息，请参见

AngularJS $timeout Service API Reference

Answer 2

首先，您应该遵循@barbsan提供的解决方案。使用$timeout而不是setTimeout。话虽这么说，您仍然想$scope.$apply()。

为此，如果您查看angularjs docs for $timeout，则第三个参数就是为此。所以您可以执行以下操作

$timeout(function() {
              $scope.secondInput = "second input";
            }, 1000,true);

Answer 3

从setTimeout更新第二个输入时，未检测到更改，必须手动强制检测更改。

我认为在$scope.$digest();之后添加$scope.secondInput =...应该可以解决问题。

在超时函数中调用$ scope

3 个答案: