javascript - 获取触发 $watch 的对象属性

Question

当您使用 $watch 方法时(按值相等)。有没有办法查看更改了哪个对象属性？

例如

/**
                 * Save state of button: Cancelled
                 */
                $scope.$watch('buttons.cancelled', function(newValue, oldValue) {
                    if(newValue != oldValue && newValue !== undefined)  {
                        privates.viewState.buttons.cancelled = $scope.buttons.cancelled;
                    }
                });

                /**
                 * Save state of button: Booked
                 */
                $scope.$watch('buttons.booked', function(newValue, oldValue)    {
                    if(newValue != oldValue && newValue !== undefined)  {
                        privates.viewState.buttons.booked = $scope.buttons.booked;
                    }
                });

变成了；

        $scope.$watch('buttons', function(newValue, oldValue)   {
            if(newValue != oldValue && newValue !== undefined)  {
                //Is there a way to know which button triggered this watch?
            }
        }, true);

Answer 1

这是一个 example .

我也希望看到一个 Angular 内置功能，但就目前而言，您需要手动执行此操作

我将按钮放在对象数组 中而不是散列键中，因为:

• 哈希键更难迭代和转换。
• 我使用 ng-model ( Difficulty with ng-model, ng-repeat, and inputs )

$watch 是用新值和旧值调用的，只需比较它们:

$scope.buttons = [
  { name: 'cancelled', checked: false},
  { name: 'booked', checked: false},
  { name: 'something', checked: false}
];

$scope.$watch('buttons',function(newVal,oldVal){
  oldVal = oldVal.reduce(function(p,k){ p[k.name] = k.checked; return p;},{});

  var changed = newVal.filter(function(k){ 
    return oldVal[k.name] !== k.checked;
  });

  changed = changed.reduce(function(p,k){ p[k.name] = k.checked; return p;},{});

 $scope.changed = changed;

},true);