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?

try adding <li ui-tree-node data-drag-delay="100" ng-repeat="node in mydata" > " — Pankaj Parkar
– Pankaj Parkar, Commented May 6, 2015 at 20:17

igraf · Accepted Answer · 2015-05-07 13:18:51Z

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 7, 2015 at 13:18

igraf

811 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vaibhav Over a year ago

you mean to say that drag and onclick can't be used together?

practical programmer Over a year ago

I also had issues with click + drag, but worked it around. See details here: stackoverflow.com/questions/27088636/…

oFace · Accepted Answer · 2018-02-13 16:33:49Z

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>

Collectives™ on Stack Overflow

angular-ui-tree click doesn't work

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related