I'm sure it is pretty simple question, but I can't find answer. I use pretty common pattern for creating tree. I need to know if user click parent node or child node. Everything works fine if I click parent node. But if I click child node, the callback function calls two times - first from child node, second from parent node. Could somebody explain me why? Thank you.
<div id="groups-tree" class="col-sm-4">
<script type="text/ng-template" id="nodes_renderer.html">
<div ui-tree-handle class="tree-node tree-node-content">
<a class="btn btn-success btn-xs" ng-if="node.nodes && node.nodes.length > 0"
ng-click="selected(node)" data-nodrag>
<span class="glyphicon"
ng-class="{
'glyphicon-chevron-right': collapsed,
'glyphicon-chevron-down': !collapsed
}"></span>
</a>
{{node.title}}
</div>
<ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}">
<li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_renderer.html'"
ng-click="selected(node)"*@ data-nodrag>
</li>
</ol>
</script>
<div class="row">
<div class="col-sm-6">
<div ui-tree id="tree-root">
<ol ui-tree-nodes ng-model="data" data-nodrag>
<li ng-repeat="node in data" ui-tree-node ng-include="'nodes_renderer.html'"
ng-click="selected(node)"></li>
</ol>
</div>
</div>
</div>
</div>
I found solution here. The angular-ui-tree is sequence of enclosed elements. So I should stop propagate the event from child element to parent element.