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

Question

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 problem 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?

The answer may be here: http://stackoverflow.com/questions/20300866/angularjs-ng-click-stoppropagation — k102, Jul 05 '16 at 07:12

score 6 · Accepted Answer · answered Jul 05 '16 at 07:12

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();
}

Pankaj Parkar · Answer 2 · 2016-07-05T07:19:22.860

4

This is how event bubbling works, You need to stopPropagation of inner div click event to prevent to happen it upwards.

ng-click="updateSubNav(sub.Action); $event.stopPropagation()"

You could do the same by passing $event object to updateSubNav method & stopPropagation of event from there like @Tushar already shown in his answer.

edited Jul 05 '16 at 07:19

answered Jul 05 '16 at 07:12

Pankaj Parkar

134,766
23
234
299

@sameera207 np, I pleased that you got helped from us, Thanks :) – Pankaj Parkar Jul 05 '16 at 07:29

score 0 · Answer 3 · answered Jul 05 '16 at 07:17

This is due to event bubbling

 <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, $event)"
              >
                {{sub.DisplayValue}}
              </li>
             </ul>
          </li>
        </ul>


        $scope.updateSubNav = function(action,$event){
         $event.stopPropagation();
        }

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

3 Answers3