Question

根据角度documentation，watchCollection监视对象的属性，并在任何值发生变化时执行。

这是一段代码：

$scope.$watchCollection('obj', function () {
    if ($scope.obj.A == null) 
        $scope.obj.B = null;

    if ($scope.obj.B == null)
        $scope.obj.C = null;

    if ($scope.obj.C == null) 
        $scope.obj.D = null;
})

您可能已经注意到，只要其中一个属性无效，此函数的目的就是级联null值。正在从DOM绑定输入更改$scope.obj属性，并成功触发该函数。

执行期间发生的事情是，当$scope.obj.A值更改为null时，函数会触发两次（应该是三次）。这很奇怪，考虑到B和C都应该无效，因此会一次又一次地触发函数。

有关于此的任何想法吗？

更新：这是一个fiddle，可以更好地解释这种情况。

Answer 1

＆＃34;无效＆＃34;在一次传递中发生（一次函数调用）：由于您在设置每个属性后都没有返回，一旦if条件的计算结果为true，所有子请求if条件也会评估为真。

因此，第一次执行是由于A更改为null而第二次执行是由于所有其他属性＆＃39;更改为null。

如果你想看到＆＃34;惊人的＆＃34;你期望的效果，你需要在每个if块中添加一个return语句：

// We don't only need to check if something is `null`,
// but also if it changed from the last iteration,
// so we must keep a reference to the old values.
var oldObj = angular.copy($scope.obj, {});
$scope.$watchCollection('obj', function (newObj) {
    if ((newObj.A !== oldObj.A) && (newObj.A === null)) {
        oldObj.A = null;
        newObj.B = null;
        return;
    } else {
        oldObj.A = newObj.A;
    }

    if ((newObj.B !== oldObj.B) && (newObj.B === null)) {
        oldObj.B = null;
        newObj.C = null;
        return;
    } else {
        oldObj.B = newObj.B;
    }

    if ((newObj.C !== oldObj.C) && (newObj.C === null)) {
        oldObj.C = null;
        newObj.D = null;
        return;
    } else {
        oldObj.C = newObj.C;
    }
});

另请参阅此 short demo 。

AngularJS - watchCollection触发事件

1 个答案: