AngularJS自定义指令与多选

比方说，我有2个指令：“家长”（即表）和“孩子”（TR），我想是能够选择的子元素，并一直在我父母指导他们的名单（我认为管制员是唯一可能的地方，不是吗？）。我处理click事件，以更新存储在我的控制器列表，它工作正常，但我也想保持“选择”类选择的项目，但由于选择还可以通过父指令的控制器来改变（并修改控制器中的DOM是“禁止”），我能想到的唯一可能性是我的子指令中的一个观察者。AngularJS自定义指令与多选

看一看的例子，请：

angular.module('App') 
    .directive('parent', function() { 
    return { 
     scope : {}, 
     controller: function($scope) { 
      this.selectedItems = []; 
     } 
    } 
}).directive('child', function() { 
    return { 
     require: '^parent', 
     link: function(scope, element, attrs, controller) { 
      scope.$watchCollection('controller.selectedItems', function() { 
       //add or remove 'selected' class here. 
      } 
     } 
    } 
});

这不起作用（观察者事件触发只有当数组引用的变化，而不是单个元素）进行设计，它似乎并不正确的，你能否提供一个更好的方法来解决这个问题？

更新：

注意controller.selectedItems在控制器修改，但是孩子的指令似乎并不看任何改变。

来源

2015-10-19 Andrzej Czerwoniec

根据您的反馈添加了固定的解决方案。 – morels

请参见： How to deep watch an array in angularjs?

您应该使用$表并设定$第三个可选的参数看为true。

 scope.$watch(function(){ 
      return controller.selectedItems; 
      }, 
      function() { 
      //add or remove 'selected' class here. 
      }, 
      true 
     );

更新：

好了，你也应该通知所有的应用程序的外部观察家认为修改已经发生了。在AngularJS中，如果一个变量被控制器修改，但在其他地方观察，并且如果没有$ digest或$ apply，那么观察者没有看到任何改变。所以问题不在于观察者的选择，而在于缺少$ apply命令。

只需添加：

$scope.$apply();

在控制器阵列的变更后。

来源

2015-10-19 13:06:10 morels

角度提供了$ watchCollection针对所以我觉得我不应该使用深的手表，它不工作，要么 - 它仍然只触发时，信号的变化 –

什么是selectedItems的内容？是一组简单的值或对象吗？在第二种情况下，你需要深入观察它。无论如何，我用'function（）{return} controller.selectedItems; }'因为通常给'controller.selectedItems'不起作用。 – morels

这是对象数组，但我不想知道有关单个对象的更改，但是想知道数组中的更改 - 删除/添加的项目。因此，例如，每当新项目被添加到这个数组我想触发事件。 –

我与调用$范围固定它。修改控制器阵列后$申请（）。方法是由javascript事件触发的，因此摘要循环从未运行过。

如果任何人有与上述有关的设计其他建议，请让我知道。

来源

2015-10-19 13:48:51

显然。如果一个变量被控制器修改，但在其他地方观察，如果没有$ digest或$ apply，那么观察者看不到任何改变。所以问题在其他地方。在你的OP中，为了充分理解问题，错过了代码！ – morels

是的，的确如此。非常感谢您的帮助！ –

AngularJS自定义指令与多选

回答

相关问题