AngularJS Bootstrap 可折叠树视图答案

【问题标题】：AngularJS Bootstrap Collapsable TreeviewAngularJS Bootstrap 可折叠树视图
【发布时间】：2015-10-25 19:50:59
【问题描述】：

我正在尝试将this Stack Overflow question 处的选定答案处理到我的 AngularJS 应用程序中。特别是 JQuery 代码块

$(function () {
    $('.tree li:has(ul)').addClass('parent_li').find('>span').attr('title', 'Collapse this tree');
    $('.tree li.parent_li >span').click(function (e) {
        console.log("test");
        var children = $(this).parent('li.parent_li').find(' > ul > li');
        if (children.is(":visible")) {
            children.hide('fast');
            $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
        } else {
            children.show('fast');
            $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
        }
    e.stopPropagation();
    });
});

它似乎适用于第一行，因为我使用的跨度确实有“折叠这棵树”作为它们的工具提示。但是，console.log 语句永远不会被触发。我尝试通过浏览器调试器检查元素，一切看起来都很好。我尝试将 angularJS 生成的类添加到上面的 JQuery 中，并尝试了 $().click 和 $().on('click') 功能，但似乎都不起作用。

我也尝试过使用 ng-click 并将其手动放置在每个跨度上，但是一旦我进入 JQuery，即使我通过函数参数传递 ID，它也不知道是哪个元素按下了它。

有没有人幸运地让它与 Angular 一起工作？

我看到一些地方建议递归管理树的指令，但我的树结构不一定适合自动化，因为它基于我们的对象模型。

【问题讨论】：

我强烈建议不要尝试在 Angular 应用程序中混合使用 jQuery dom-handling，尤其是在这种情况下，很容易编写处理树中折叠的指令。无论您在模型端处理什么树结构，都不应该有任何问题;)
对我从哪里开始有什么建议吗？我不需要明确的答案，只需朝着正确的方向前进。
检查this answer 是否有递归指令。然后，您可以添加一个在每个节点上切换布尔值的按钮，并让子容器 ng-hide 观察所述布尔值。

标签： jquery angularjs twitter-bootstrap

【解决方案1】：

这是一个使用the answer mentioned in my comment 处理折叠树的plunkr。

我基本上只是在指令模板中添加了折叠：

<div>
  <span 
    ng-if="item.children && item.children.length" 
    ng-click="item.hideChildren = !item.hideChildren">{{item.hideChildren ? '+' : '-'}}
  </span>
  <span>{{item.label}}</span> 
  <ul ng-if="item.children && item.children.length" ng- hide="item.hideChildren">
    <li ng-repeat="child in item.children">
      <tree-node item="child"></tree-node>
    </li>
  </ul>
</div>

【讨论】：