使用AngularJS观察整个对象(深度观察）

Watch entire object (deep watch) with AngularJS

本文关键字：深度观察 对象 AngularJS 观察 使用      更新时间：2023-11-29

这是一个表示表单数据的作用域angular-resource variable / object：

    $scope.form = {
              name: 'bob', 
              email: 'bob@bobs.com'
    }

这是我观察name变量变化的方式。

    $scope.$watch('form.name', function(newVal) {
        if(newVal) {
            alert(newVal)
        }
    });

如果有任何文件被更改，有什么方法可以查看——名称、电子邮件或任何scope.form可能有的内容？

我的目的是根据用户更改了表单上的内容来禁用或启用我的表单"保存"。

$watch()的第三个参数将使其检查对象相等性（深度监视）。

  $scope.$watch('form', function(newVal) { //watch the whole object
        if(newVal) {
            alert(newVal);
        }
    }, true); //pass "true" here.

为了进一步完善我的答案，在这种情况下，这两种方法都会产生相同的结果：在这里进行实时演示（点击）。但$watchCollection是浅层的，不会观察任何嵌套的更改

  $scope.$watch('form', function(newForm, oldForm) {
    console.log(newForm.name);
  }, true);

OR：（不是深度手表）

  $scope.$watchCollection('form', function(newForm, oldForm) {
    console.log(newForm.name); 
  });

由于AngularJS 1.1.x，监视数组中多个值或对象属性的首选方式是$watchCollectionhttp://docs.angularjs.org/api/ng.$rootScope.Scope

$scope.$watchCollection('form', function(newValues, oldValues) {
    console.log('*** Watch has been fired. ***');
    console.log('New Names :', newValues);}
);
相关文章：