我想观察字典中的变化,但由于某种原因,手表回调没有被调用。

这是我使用的一个控制器:

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

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

这是小提琴。

我期望$watch回调在每次更改姓名或姓氏时被触发,但它没有发生。

正确的做法是什么?


当前回答

用true作为第三个参数调用$watch:

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

默认情况下,在JavaScript中比较两个复杂对象时,它们将被检查是否“引用”相等,即询问两个对象是否指向同一个对象,而不是“值”相等,即检查这些对象的所有属性的值是否相等。

根据Angular文档,第三个参数是objectEquality:

当objectEquality == true时,watchExpression的不等式根据角度确定。=函数。为了保存对象的值以供以后比较,使用angular。使用拷贝功能。因此,这意味着观看复杂的物体会对记忆和表现产生不利影响。

其他回答

试试这个:

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

    function track(newValue, oldValue, scope) {
        console.log('changed');
    };

    $scope.$watch('form.name', track);
}

form对象没有改变,只有name属性改变了

更新的小提琴

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

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

用true作为第三个参数调用$watch:

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

默认情况下,在JavaScript中比较两个复杂对象时,它们将被检查是否“引用”相等,即询问两个对象是否指向同一个对象,而不是“值”相等,即检查这些对象的所有属性的值是否相等。

根据Angular文档,第三个参数是objectEquality:

当objectEquality == true时,watchExpression的不等式根据角度确定。=函数。为了保存对象的值以供以后比较,使用angular。使用拷贝功能。因此,这意味着观看复杂的物体会对记忆和表现产生不利影响。

当您正在寻找表单对象的变化时,最好的观察方法是使用 watchCollection美元。请查看官方文件以了解不同的性能特征。

对于任何想要观察对象数组中对象的变化的人来说,这似乎对我有用(因为本页上的其他解决方案没有):

function MyController($scope) {

    $scope.array = [
        data1: {
            name: 'name',
            surname: 'surname'
        },
        data2: {
            name: 'name',
            surname: 'surname'
        },
    ]


    $scope.$watch(function() {
        return $scope.data,
    function(newVal, oldVal){
        console.log(newVal, oldVal);
    }, true);