为什么我的 AngularJS 组件对属性值更改没有反应？

Question

我在 SO 和整个网络上看到了几个关于此类主题的问题。具体来说，我尝试关注one clear example，但无法让它在我的代码中工作。我有一个plunker，希望能说明我的问题；它遵循该示例，但不起作用。

• 组件为列表中的每个项目显示一个复选框（指定为属性，应该是单向绑定，因为组件永远不会更改与页面通信的值）
• 当只有一个复选框被选中时，它会调用一个回调函数来 告诉页面位的异或是真的
• 有一个“呼入”功能可以清除所有复选框。 （这可行，但有点无关紧要，它是早期 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

您还可以通过向手表添加第三个参数“true”来使用“深度”对象检查。然而，这非常“昂贵”，不推荐在 1.2.x 中引入 watchCollection

 $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"