为什么我的AngularJS组件不会对属性值更改做出反应？

Question

我已经在SO和网络上看到了关于这个主题的几个问题。具体来说，我试图遵循one clear example，但无法让它在我的代码中工作。我有一个plunker，我希望显示我的问题;它遵循这个例子，但不起作用。

• 的组件显示一个用于在列表中每个项目的复选框（指定为一个属性，应该是一个单向的结合作为组分从不改变的值传送到所述页）
• 当一个和只有一个复选框被选中，它调用一个回调函数 告诉页面XOR的位是否为真
• 有一个“call in”函数可以清除所有的复选框。 （这是有用的，但是有点不相干，它是早期Plunker对于不同问题的遗迹）
• 页面上有一个添加位按钮，它将一个项目添加到要显示组件的位列表中
• 在要显示的位列表中，组件控制器中有一个$watch()。现在它只是记录它被调用，但更接近我最终目标的是确保新的复选框最初被设置而不是被清除。

$watch()在页面加载（创建组件）时触发。但是，当我单击按钮并添加一点时，创建复选框的ng-repeat会触发，但$watch()不会。

Answer 1

使用手表收藏。阅读关于它here。适用于您的plunkr该解决方案将是本

$scope.$watchCollection(
 
     "vm.myBits", 
 
     function(newValue, oldValue) { 
 
     console.log("a. new bit"); 
 
    });

An update version of your plunk

您还可以使用“深”对象加入“真实”的第三个参数表检查。然而，这是非常 “昂贵”，而不是推荐一次watchCollection在1.2.x版本推出

$scope.$watch(
 
     "vm.myBits", 
 
     function(newValue, oldValue) { 
 
     console.log("a. new bit"); 
 
    },true); // The TRUE is a deep checking and also works but is "expensive"