sameera207 sameera207 - 5 months ago 12
AngularJS Question

ng-click triggered twice with in a nested ng-click

I have an issue when trying to use the

ng-click
inside a list which is a sub list of another list which has a
ng-click
event. Following is my code

<ul>
<li
ng-repeat="facet in node.Facets"
ng-click="updateNav(facet.Action)"
ng-cloak
>
{{facet.DisplayValue}}
<ul>
<li ng-repeat="sub in facet.Refinements.Nodes[0].Facets"
ng-click="updateSubNav(sub.Action)"
>
{{sub.DisplayValue}}
</li>
</ul>
</li>
</ul>


The broblem I have is, when I click
updateSubNav
it automatically triggers
updateNav
. How can I prevent triggering
updateNav
When I click
updateSubNav
(because I want those 2 methods to work independently ?

thanks in advance

Answer

Prevent the event propagation.

View:

<li ng-repeat="sub in facet.Refinements.Nodes[0].Facets"
    ng-click="updateSubNav($event, sub.Action)">
                           ^^^^^^        === Pass event object

Controller:

$scope.updateSubNav = function($event, action) {
    // Code here

    // Stop propagation
    $event.stopPropagation();
}