在angular-ivh-treeview中选择节点时检查所有父节点

Question

我想使用angular-ivh-treeviewHow。我要使用的这个sample。 但是这个样本对我来说有问题，当我选择一个未选中所有父节点的节点时。如何解决？

Answer 1

你至少有几个选择。您可以创建自定义模板并侦听复选框点击，然后执行以下任一操作：抓住单击节点的父级并更新其选定状态，或者发出一个事件，告知父节点更改其选定状态。

以下是前一个解决方案的示例：http://jsbin.com/cegipa/6/edit?html,js,output

请注意，单击子节点时，会更新其父节点以匹配其新状态。这可以通过使用以下模板来完成：

<span ivh-treeview-twistie></span>
</span>
<input type="checkbox" select-parents ng-model="node.selected">
<span class="ivh-treeview-node-label" ivh-treeview-toggle>
  {{trvw.label(node)}}
</span>
<div ivh-treeview-children></div>

将此指令附加到复选框：

app.directive('selectParents', function(ivhTreeviewBfs) {
  return {
    link: function(scope, element, attrs) {
      element.on('click', function() {
        var n = scope.node;
        ivhTreeviewBfs(stuff, function(node, parents) {
          if(n === node) {
            angular.forEach(parents, function(p) {
              p.selected = n.selected;
            });
            return false;
          }
        });
        scope.$apply();
      });
    }
  };
});

你可以通过传递事件来做类似的事情（也可能更有效率）。