Question

我正在尝试将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合作？

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

Answer 1

这里有plunkr使用the answer mentioned in my comment来处理折叠树。

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

<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>

AngularJS Bootstrap可折叠树视图

1 个答案: