本文翻译自：$watch an object

I want to watch for changes in a dictionary, but for some reason watch callback is not called. 我想要查看字典中的更改，但由于某种原因，不会调用监视回调。

Here is a controller that I use: 这是我使用的控制器：

function MyController($scope) {$scope.form = {name: 'my name',surname: 'surname'}$scope.$watch('form', function(newVal, oldVal){console.log('changed');});
}

Here is fiddle . 这是小提琴 。

I expect $watch callback to be fired each time name or surname is changed, but it doesn't happen. 我希望每次更改名称或姓氏时都会触发$ watch回调，但不会发生。

What is the correct way to do it? 这样做的正确方法是什么？

---

#1楼

参考：https://stackoom.com/question/1JdGP/观看一个物体

---

#2楼

Call $watch with true as the third argument: 使用true作为第三个参数调用$watch ：

$scope.$watch('form', function(newVal, oldVal){console.log('changed');
}, true);

By default when comparing two complex objects in JavaScript, they will be checked for "reference" equality, which asks if the two objects refer to the same thing, rather than "value" equality, which checks if the values of all the properties of those objects are equal. 默认情况下，在比较JavaScript中的两个复杂对象时，将检查它们是否为“引用”相等，它会询问两个对象是否引用相同的东西，而不是“值”相等，它会检查这些属性的所有属性的值对象是平等的。

Per the Angular documentation , the third parameter is for objectEquality : 根据Angular文档 ，第三个参数是objectEquality ：

When objectEquality == true , inequality of the watchExpression is determined according to the angular.equals function. 当objectEquality == true ， objectEquality == true不等式根据angular.equals函数确定。 To save the value of the object for later comparison, the angular.copy function is used. 要保存对象的值以供以后比较，请使用angular.copy函数。 This therefore means that watching complex objects will have adverse memory and performance implications. 因此，这意味着观看复杂对象将产生不利的记忆和性能影响。

---

#3楼

The form object isn't changing, only the name property is form对象不会更改，只有name属性

updated fiddle 更新小提琴

function MyController($scope) {
$scope.form = {name: 'my name',
}$scope.changeCount = 0;
$scope.$watch('form.name', function(newVal, oldVal){console.log('changed');$scope.changeCount++;
});
}

---

#4楼

Try this: 试试这个：

function MyController($scope) {$scope.form = {name: 'my name',surname: 'surname'}function track(newValue, oldValue, scope) {console.log('changed');};$scope.$watch('form.name', track);
}

---

#5楼

The reason why your code doesn't work is because $watch by default does reference check. 您的代码不起作用的原因是因为$watch默认情况下会引用检查。 So in a nutshell it make sure that the object which is passed to it is new object. 简而言之，它确保传递给它的对象是新对象。 But in your case you are just modifying some property of form object not creating a new one. 但在您的情况下，您只是修改表单对象的某些属性而不是创建新的属性。 In order to make it work you can pass true as the third parameter. 为了使其工作，您可以传递true作为第三个参数。

$scope.$watch('form', function(newVal, oldVal){console.log('invoked');
}, true);

It will work but You can use $watchCollection which will be more efficient then $watch because $watchCollection will watch for shallow properties on form object. 它可以工作，但你可以使用$ watchCollection，这比$ watch更有效，因为$watchCollection将监视表单对象的浅层属性。 Eg 例如

$scope.$watchCollection('form', function (newVal, oldVal) {console.log(newVal, oldVal);
});

---

#6楼

As you are looking for form object changes, the best watching approach is to use 当您正在寻找表单对象更改时，最佳观看方法是使用
$watchCollection . $watchCollection 。 Please have a look into official documentation for different performance characteristics. 有关不同的性能特征，请查看官方文档 。