Question

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

app.controller('TheCtrl', ['$scope', function (scope) {

    scope.user = {
        name: "木士羽",
        email: 'fdaf@qfdsafq.com',
    };

    scope.$watch('user.name', function () {
        console.log('change');
    });

}]);

angular.bootstrap(document.documentElement, ['app']);

加载页面时，在控制台中打印“更改”。

初始化时会触发

$watch。如何避免呢？

Answer 1

这种方法怎么样：

第一次oldValue将等于newValue，因此请通过if验证来避免这种情况。

$scope.$watch(
      function() {
        return $scope.user.name;
       },
       function(newValue, oldValue) {
           if (oldValue !== newValue) {
               // .....
            }
        });

演示 Fiddle

顺便说一句，在观察者中编写if (oldValue !== newValue){ /* ...*/}以避免在监视下执行额外代码

是一个很好的做法

Answer 2

您第一次可以将标志初始化为true，并且一旦触发了手表，就可以将其设置为false。这样手表就不会被触发。 var firstTime = true 然后当第一个$ watch开火时，做

$scope.$watch('testValue', function() {
if (firstTime) {
$timeout(function() { firstTime = false; });
} else {
   //perform operation.

}

angular doc推荐的第二种方法第一次调用监听监听器时，旧值和新值是相同的。所以检查下面给出的不等条件

  $scope.$watch('testValue', function(newValue, oldValue) {
      if (newValue !== oldValue) {
      // perform your operation 
   }
  });

Answer 3

根据docs，您应检查新值和旧值是否不同，例如

$scope.$watch('user.name', function(newVal, oldVal) {
  if (newVal !== oldVal) {
    // Do something with newVal
  }
});

Answer 4

scope.$watch('user.name', function (val) {
    if (val !== undefined) {
        console.log('change');
    }
});

在$ init上触发angular $ watch？

4 个答案: