Clickable link in draggable node in angular-ui-tree - angularjs

Question

In angular-ui-tree I'm looking for a way to have links inside a draggable node.
What's happening now is that when I click on the link inside the node it starts "holding" the whole node to drag it.
I saw this answer Angular JS (angular-ui-tree) ng-click conflict vs drag start event, however it is not similar to what I want to do. In this answer ng-click is bound to the node, where in my case I have multiple links inside the node.
Below is my html:
<div ui-tree="treeOptions" drag-delay="1000" id="tree-root">
<ol ui-tree-nodes ng-model="filteredModules" data-nodrop>
<li ng-repeat="module in filteredModules" ui-tree-node>
<div ui-tree-handle ng-click="toggle(this)">
<a class="btn btn-xs"><span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span></a>
{{module.name}}
</div>
<ol ui-tree-nodes ng-model="module.stages" data-nodrop ng-class="{hidden: collapsed}">
<li ng-repeat="stage in module.stages" ui-tree-node>
<div ui-tree-handle ng-click="toggle(this)">
<a class="btn btn-xs"><span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span></a>
{{stage.name}}
</div>
<div ui-tree-nodes ng-model="stage.cases" ng-class="{hidden: collapsed}">
<div ng-repeat="case in stage.cases" ui-tree-node>
<div ui-tree-handle>
<!-- HERE I HAVE TWO LINKS -->
{{case.name}}
<span class="glyphicon glyphicon-edit"></span> Edit
</div>
</div>
</div>
</li>
</ol>
</li>
</ol>
</div>
Is there a way to have multiple links inside a draggable node?
Thanks in advance

Answer 1

Add the no-drag attribute to the links like this:
<a data-nodrag href="/#/admin/cases/{{case._id}}">{{case.name}}</a>
<a data-nodrag href="/#/admin/cases/edit/{{case._id}}" class="pull-right btn btn-primary btn-xs"><span class="glyphicon glyphicon-edit"></span> Edit</a>

Answer 2

I had the same issue. This is how I fixed it:
Add the a element in line number 602 of angular-ui-tree.js
eventElmTagName = eventElm.prop('tagName').toLowerCase();
if (eventElmTagName == 'input' ||
eventElmTagName == 'textarea' ||
eventElmTagName == 'button' ||
eventElmTagName == 'i' ||
eventElmTagName == 'a' || //this would ignore 'a' elements while dragging
eventElmTagName == 'select') {
return;
}
Just an FYI - you are using glyphicons in the span element. So you might face the same problem if you click on the glyphicon. Add span element in the above statement to fix that as well.