AngularJS Bootstrap Collapsable Treeview

Question

I'm attempting to work the selected answer over at this Stack Overflow question into my AngularJS app. In particular, the JQuery code block

$(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();
    });
});

It appears to work for the first line, as the spans I'm using do have "Collapse this tree" as their tooltip. However, the console.log statement is never fired. I've tried inspecting the element through the browser debugger and all looks fine. I've tried adding the angularJS-generated classes into the JQuery above, as well as tried both $().click and $().on('click') functionality but neither seemed to work.

I also tried toying around with ng-click and just putting this manually on each span but once I got inside the JQuery it had no idea which element had pressed it even through I was passing the ID through the function parameters.

Has anyone had any luck getting this to work with Angular?

I've seen a few places suggest directives for recursively managing the trees but my tree structure doesn't necessarily lend itself to automation since it's based off of our object model.

I would strongly suggest not to try and mix jQuery dom-handling inside an Angular app, especially in a case like this where it's really easy to write a directive that handles collapsing in a tree. There shouldn't be any issue with whatever tree structure you're handling model-side ;) — Jay, Aug 03 '15 at 16:06
Any suggestions on where I would get started with that? I don't need an explicit answer just a push in the right direction. — Friend, Aug 03 '15 at 16:14
Check [this answer](http://stackoverflow.com/questions/14430655/recursion-in-angular-directives) for recursive directives. You can then add a button that toggles a boolean on each node, and have the children container ng-hide observing said boolean. — Jay, Aug 03 '15 at 16:35

score 2 · Accepted Answer · edited May 23 '17 at 11:58

Here's a plunkr using the answer mentioned in my comment that handles a collapsing tree.

I basically just added collapsing to the directive template:

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

1 Answers1