为什么我的AngularJS组件对属性值变化没有反应?

时间:2017-05-03 13:31:32

标签: angularjs-components

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

  • 组件为列表中的每个项目显示一个复选框(指定为属性,应该是单向绑定,因为组件永远不会更改值以与页面进行通信)
  • 选中一个且仅一个复选框时,它会调用回调函数 告诉页面该位的Xor是真的
  • "呼叫"清除所有复选框的功能。 (这有效,但有点无关紧要,它是早期Plunker对于另一个问题的遗迹)
  • 页面上有一个“添加位”按钮,用于将项目添加到要显示的组件的位列表中
  • 要显示的位列表中的组件控制器中有$watch()。现在它只是记录它被调用但更接近我最终目标的是确保新复选框最初设置而不是清除。

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

1 个答案:

答案 0 :(得分:1)

使用手表系列。阅读它here。适用于你的plunkr的解决方案就是这个



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




An update version of your plunk

你也可以使用" deep"通过添加' 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"