angular-ui-tree click doesn't work

Question

I downloaded the angular-ui-tree package and installed it in a webserver. I can bring up the example pages fine in my browser, but all the click actions on the buttons (to collapse/expand the tree, add node etc) do not work. I don't get any errors in firebug. If I point my browser at the public page for the tree component ( https://jimliu.github.io/angular-ui-tree/index.html) it does work.

I did some debugging and found that the problem is when ng-repeat is called for a ui-tree-node element, an ng-click action does not work. In the code below, the test() function is in my controller and it gets executed if I remove the ui-tree-node or ng-repeat tags.

<li ui-tree-node ng-repeat="node in mydata" > 
    <a  ng-click="test()" >{{node.title}} </a>
</li>

Is this a bug in angular tree component? Is there some way I can fix this in my environment?

score 4 · Answer 1 · answered May 07 '15 at 13:18

4

The fix was to add the data-nodrag tag in the top level ui-tree-nodes element.

(adding data-nodrag in the li element also works).

answered May 07 '15 at 13:18

igraf

81
1
5

1

you mean to say that drag and onclick can't be used together? – Vaibhav Apr 12 '16 at 11:56
I also had issues with click + drag, but worked it around. See details here: http://stackoverflow.com/questions/27088636/angular-js-angular-ui-tree-ng-click-conflict-vs-drag-start-event/37527842#37527842 – practical programmer May 30 '16 at 14:14

score 0 · Answer 2 · answered Feb 13 '18 at 16:33

You can use both:

click with toggle(this)
drag

together, just make sure that the element to expand/collapse ist not within the ui-tree-handle

<script type="text/ng-template" id="tree_renderer.html">
  <div ng-class="{collapsed: collapsed}">
    <div class="ctx_node" 
        ui-on-drop="onDrop($event, $data, ctx,node); active=false"> 
        <span class="expanded" 
            ng-click="toggle(this)"
            ng-class="{'collapsed': collapsed,'expanded': !collapsed}">
        </span>
        <span ui-tree-handle>{{node.title}}</span>
    </div>
  </div>
  <ol ui-tree-nodes="" ng-model="node.nodes">
    <li ng-repeat="node in node.nodes" 
        ui-tree-node ng-include="'tree_renderer.html'">
    </li>
  </ol>
</script>
<div ui-tree data-drag-enabled>
  <ol ui-tree-nodes="" ng-model="node.nodes" id="tree-root">
    <li ng-repeat="node in node.nodes" 
        ui-tree-node ng-include="'tree_renderer.html'"></li>
  </ol>
</div>

angular-ui-tree click doesn't work

2 Answers2