$watch对象

Question

我想查看字典中的更改，但由于某种原因，没有调用watch callback。

下面是我使用的一个控制器：

function MyController($scope) {
    $scope.form = {
        name: 'my name',
        surname: 'surname'
    }

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

这是fiddle。

我希望每次名字或姓氏改变时都会触发$watch回调，但这并没有发生。

正确的做法是什么？

Answer 1

form对象不会更改，只有name属性会更改

更新的fiddle

function MyController($scope) {
$scope.form = {
    name: 'my name',
}

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

Answer 2

你的代码不能工作的原因是因为默认情况下$watch会做引用检查。因此，简而言之，它确保传递给它的对象是新对象。但是在您的例子中，您只是修改了form对象的一些属性，而不是创建一个新的。为了使其正常工作，您可以将true作为第三个参数传递。

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

它可以工作，但您可以使用$watchCollection，它将比$watch更有效，因为$watchCollection将监视表单对象上的浅层属性。例如。

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

Answer 3

在查找表单对象更改时，最好的监视方法是使用

$watchCollection。请关注官方documentation，了解不同的性能特点。