使用AngularJS深度观察（deep watch）整个对象

Question

这是一个作用域变量 / 对象 angular-resource，它表示表单数据：

    $scope.form = {
              name: 'bob', 
              email: '[e-mail]'
    }

这是我观察 name 变量被更改的方式。

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

有什么方法可以监视表单中的字段是否被更改，例如名称、电子邮件或其他scope.form可能具有的字段？

我的目的是根据用户是否更改了表单来启用或禁用"保存"按钮。

- ses

---

请查看$watchCollection http://docs.angularjs.org/api/ng.$rootScope.Scope。 - Markus Kösel

Answer 1

$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);

或： （不是一个深度手表）

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

- m59

---

if(newVal) {这行代码的目的是什么？难道函数不应该只在有新值时执行吗？ - adelriosantiago

@adelriosantiago 是的，但是新值在第一个摘要周期中可能是“未定义”的。这个问题和我在那里的答案也是一个例子。https://dev59.com/J18e5IYBdhLWcg3wd6M6 - m59

Answer 2

自从AngularJS 1.1.x以来，$watchCollection已成为监视数组中多个值或对象属性的首选方法。http://docs.angularjs.org/api/ng.$rootScope.Scope

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

- Markus Kösel