Вызов области $ в функции тайм-аута

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, обработки исключений, отслеживания свойств и т. Д.

Для получения дополнительной информации см.

• Справочник по API AngularJS $ timeout

Answer 2

Прежде всего, вы должны следовать решению, данному @barbsan. используя $timeout вместо setTimeout. При этом вы все равно хотите $scope.$apply().

, чтобы сделать это, если вы посмотрите в angularjs документы для $timeout, третий параметр для этого. так что вы можете просто сделать следующее

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

Answer 3

Когда вы обновляете второй вход из setTimeout, изменение не обнаруживается, и вы должны принудительно обнаружить изменение вручную.

Я думаю, что добавление $scope.$digest(); после $scope.secondInput =... должно помочь.