$scope.$watch 不会在每次更改时触发

Question

我正在使用 angularJS 1.4.8，昨天我注意到 $scope.$watch 不会触发每次导致我的应用程序出现错误的更改。

有没有办法强制它立即对每个更改起作用？ 就像在这段代码中一样，在消息的每次更改中，我都希望手表中的函数触发：

(function(){

  angular.module('myApp', [])
  .controller('myAppController', myAppController)

  function myAppController($scope){
    console.log('controller loading !');
    $scope.message = 'message1';

    $scope.$watch('message', function(newMessage){
      console.log('newMessage', newMessage)
    });

    function changeMessage(){
      $scope.message='hi';
      $scope.message='hi12';
    }

    changeMessage(); 
  }

})();

控制台将打印：

controller loading !
newMessage hi22

plunker 链接https://plnkr.co/edit/SA1AcIVwr04uIUQFixAO?p=preview

编辑： 我真的很想知道除了用超时包装更改并使用范围应用之外，是否还有其他方法，在我的原始代码中，我在多个地方更改范围属性，我想避免每次更改都使用这个。

Answer 1

发生这种情况是因为只有在摘要循环“之间”更改值时才会触发监视。

您的函数正在更改同一函数范围内的消息值。这将在同一个摘要循环中执行。 当角度移动到下一个循环时，它只会看到最后更改的值，在您的情况下将是 hi22。

Here's 一篇很好的文章，让这种行为变得清晰

Answer 2

更新您的 changeMes​​sage 函数，使其使用 $scope.$apply 函数，这将确保您的更改得到反映，并且 Angular 知道您对变量的更改。

changeMessage() {
   setTimeout(function () {
        $scope.$apply(function () {
          $scope.message = "Timeout called!";
        });
    }, 2000);
}

Answer 3

如果您将值更改为相同的摘要循环，则不会触发观察程序并采用最后一个值。当我们运行$timeout 时，我们会在下一个摘要循环中更改$scope.message 的值，并且观察者会按预期捕获它。

看看简单的测试：

 $scope.$watch(function(){
  console.log('trigger');
  return $scope.message;
},
  function(newMessage){
  console.log('newMessage', newMessage)
});

function changeMessage(){
  $scope.message='hi';

  $timeout(function(){
    $scope.message='hi12';
  });      
}

输出：

controller loading !
 trigger
 newMessage hi
 trigger
 trigger
 newMessage hi12
 trigger

Answer 4

不需要在 setTimeout 和 $apply 中同时包裹 changeMes​​sage。如果您需要在执行前跳过一些时间，只需使用：

function changeMessage(){
    $timeout(function(){
        $scope.message = 'message';
    }/* or add time here, doesn't matter */);
}

或者只是：

function changeMessage(){
    $scope.message = 'message';
    $scope.$apply();
}

这两种方法最后都调用$rootScope.$digest。这里有更多信息：https://www.codingeek.com/angularjs/angular-js-apply-timeout-digest-evalasync/

Answer 5

$watch() 仅在每个$digest() 之间触发。

Detailed explaination about the $apply() and $digest()

在您的情况下，您在当前的$digest() 周期中不断更新$scope.message。

您可以通过使用$apply() 将每个新值应用于$scope 来更改它。就像@Ajinkya 写的那样。 唯一的问题是将 2000 毫秒设置为超时，并不能始终确保它在 $digest() 之后执行。最重要的是，Angular 有一个内置的超时功能。见下文。

(function(){
  
  angular.module('myApp', [])
  .controller('myAppController', myAppController)
  
  function myAppController($scope, $timeout){
    console.log('controller loading !');
    $scope.message = 'message1';
    
    $scope.$watch('message', function(newMessage){
      console.log('newMessage', newMessage)
    });
    
    function changeMessage(){
    setTimeout(function () {
        $scope.$apply(function () {
          $scope.message='hi12';
        });
    }, 2000);
      
    }
    
    changeMessage(); 
  }
  
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myAppController"></div>

---

解决方案

最好的方法是在$timeout 函数中调用构建，而不以毫秒为单位设置时间。

这样，角度始终确保$timeout 将在最新的$digest() 之后运行。最重要的是。您不必使用$scope.$apply()。因为$timeout 已经运行了$digest()，其中$scope.$apply() 正在手动调用一个新的$diggest() 循环。

(function(){
  
  angular.module('myApp', [])
  .controller('myAppController', myAppController)
  
  function myAppController($scope, $timeout){
    console.log('controller loading !');
    $scope.message = 'message1';
    
    $scope.$watch('message', function(newMessage){
      console.log('newMessage', newMessage)
    });
    
    function changeMessage(){
        $timeout(function () {
            $scope.message='hi12';
        });
      
    }
    
    changeMessage(); 
  }
  
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

    <div ng-app="myApp" ng-controller="myAppController"></div>