AngularJS:观察对象数组中的特定属性,以获取属性值的更改

Question

在我的自定义指令中,我根据数据源数组中的对象数量向DOM添加元素.我需要在每个对象中观察特定属性.当我将这些元素添加到DOM时,我想checked在toppings数组中的每个对象的属性上设置$ watch ,但它不起作用,我不知道为什么.我在函数内部设置了一个断点,当属性从true变为false或false变为true时应该调用该断点,但永远不会调用该函数.原因很明显吗？我只是在学习Angular,所以我很容易犯一个愚蠢的错误.

$scope.bits = 66;  (i.e. onions and olives)


$scope.toppings = [
    { topping: 1, bits: 2, name: 'onions' },
    { topping: 2, bits: 4, name: 'mushrooms' },
    { topping: 3, bits: 8, name: 'peppers' },
    { topping: 4, bits: 16, name: 'anchovies' },
    { topping: 5, bits: 32, name: 'artichokes' },
    { topping: 6, bits: 64, name: 'olives' },
    { topping: 7, bits: 128, name: 'sausage' },
    { topping: 8, bits: 256, name: 'pepperoni' }
     ]

模型中的每个对象都会获得一个新checked属性,该属性将为true或false.

注意:对象数组最多包含十几个项目.性能不是问题.

link: function link(scope, iElement, iAttrs, controller, transcludeFn) {


  <snip>

 // At this point  scope.model refers to $scope.toppings. Confirmed.

  angular.forEach(scope.model, function (value, key) {

     // bitwise: set checked to true|false based on scope.bits and topping.bits

     scope.model[key].checked = ((value.bits & scope.bits) > 0);  


     scope.$watch(scope.model[key].checked, function () {
         var totlBits = 0;
         for (var i = 0; i < scope.model.length; i++) {
            if (scope.model[i].checked) totlBits += scope.model[i].bits;
         }
          scope.bits = totlBits;
      });

   });

     <snip>

Answer 1

$scope.$watch 的 watchExpression 参数应该是字符串或函数。我还没有对此进行广泛的实验（我尝试尽可能避免显式监视），但我认为当您将“简单”范围属性视为对象引用时它也可以工作，但对于更复杂的引用则效果不佳。

我认为如果您以字符串形式提供引用，例如 'model[' + key + '].checked' 那么您可能会取得一些成功（我这么说是因为我之前对 $watchCollection 做过类似的事情）。

或者你应该能够提供一个函数，例如

$scope.$watch(function() { return scope.model[key].checked; }, function() { ... });

希望这可以帮助！