javascript - 使用 AngularJS 观察整个对象(深度观察)

Question

这是一个表示表单数据的angular-resource 变量/对象范围:

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

有一种方法可以让我看到我的 name 变量发生了变化。

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

有什么方法可以查看是否更改了任何文件 - 名称、电子邮件或任何 scope.form 可能具有的内容？

我的目的是根据用户更改了表单上的内容这一事实来禁用或启用我的表单“保存”。

Answer 1

$watch() 有第三个参数，它将检查对象是否相等(深度监视)。

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

为了进一步完善我的回答，在这种情况下，这两种方法都会产生相同的结果:Live demo here (click).但是 $watchCollection 很浅，不会监视任何嵌套的变化。

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

或者:(不是深度观察)

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