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

Question

我在 SO 和整个网络上看到了几个关于此类主题的问题。具体来说，我尝试遵循 one clear example but can't get it to work in my code. I have a plunker，希望能说明我的问题；它遵循该示例，但不起作用。

该组件为列表中的每一项显示一个复选框（指定为属性，应该是一种单向绑定，因为该组件从不更改值以与页面通信）
当只有一个复选框被勾选时，调用回调函数告诉页面这些位的异或为真
有一个 "call in" 函数可以清除所有复选框。（这有效但有点无关紧要，它是早期 Plunker 针对不同问题的遗迹）
页面上有一个“添加位”按钮，用于将项目添加到要显示的组件的位列表
要显示的位列表上的组件控制器中有一个$watch()。现在它只是记录它被调用但更接近我的最终目标的是确保新复选框最初设置而不是清除。

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

Answer 1

使用手表collection。阅读它 here。适用于您的 plunkr 的解决方案是

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

An update version of your plunk

你也可以使用"deep"object检查，通过添加第三个参数'true'到手表。然而，这是非常 "expensive" 并且在 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"

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

Why doesn't my AngularJS component react to attribute value changes?

angularjs-components