在可扩展树angularJS中突出显示当前选中的节点

Question

我想突出显示树中当前选定的节点。这意味着我想取消先前选择的节点(如果有的话)。我不希望访问整个树并取消选中已经选中的节点。

请在http://plnkr.co/edit/2a9srm7QDYcXhXD2JmrR?p=preview找到当前的实现

你能给我一个更好的方法吗?

我试图避免整个树遍历(在最坏的情况下)取消突出显示一个先前选择的节点。

谢谢。

Answer 1

您可以在TreeController中使用一个属性来存储当前选择的节点。然后，您可以将该属性传递给所有expandableTree实例(因为您通过双向数据绑定隔离了作用域)(以便所有实例共享一个公共属性:当前选择的节点)。

则更改ngClass表达式，检查当前节点是否为选中节点，例如:

ng-class="{blueBase:node===<propDenotingCurrentlySelectedNode>}"

需要注意的一点是，由于原型继承的工作方式，并且为了强制每个作用域使用继承的属性(而不是局部覆盖它)，您不应该直接传递属性，而是传递一个对象(包含该属性)。例如:

/* In TreeController */
$scope.cfg = {};
<!-- In the VIEW -->
<expandable-tree family="..." cfg="cfg"></expandable-tree>
/* In the DIRECTIVE */
...
scope: {
    ...
    cfg: '='
},
controller: function (...) {
    ...
    $scope.selectNodeLabel = function (node) {
        ...
        $scope.cfg.currentNode = node;
    }
    ...
},
template:
    '...' +
    '<label ... ng-class="{blueBase:node===cfg.currentNode}" ...' +
    '...' +
    '    <p><expandable-tree family="node" cfg="cfg"></expandable-tree></p>' +
    '    ...' +
    '        <label ... ng-class="{blueBase:step===cfg.currentNode}" ...' +
    '...',
...

---

这个<<p>看到,strong>修改演示。