ng-click event gets bind to child li in angular js

Question

Hey I am binding menuIconClick($event) function on li using ng-click directive.But gets bind to child li also. Code like as follow

%div.sideNavBar
  %ul.navBar
    %li.icons-briefcase-static{'ng-click'=>"menuIconClick($event)"} // binding here only
      %ul.subMenu
        %li All sites // but gets call here also
        %li{'ng-repeat'=>"site in sites"}
          {{site.name}}
    %li.icons-users-disabled
  %div.lock.icons-lock-disabled

The template is in HAML. I didn't got why?

Any help appreciated

@chandu sorry no code fiddle – Swapnil Patil Jun 18 '14 at 06:13 — Swapnil Patil, Jun 18 '14 at 06:13

score 2 · Accepted Answer · edited May 23 '17 at 12:07

2

Try putting the icon & icon click event as a separate element, not on the parent element. DOM events bubble up the hierarchy, so if the parent element has an ng-click handler, then clicking any child element will also trigger that parent click handler unless you stop the event propagation.

You could either stop the event propagation, similar to:

AngularJS ng-click stopPropagation

or change your DOM structure so that the briefcase icon is not a parent of the submenu:

%div.sideNavBar
  %ul.navBar
    %li
      %a.icons-briefcase-static{'ng-click'=>"menuIconClick($event)"} // no longer a parent
      %ul.subMenu
        %li All sites // click here won't bubble up to ng-click
        %li{'ng-repeat'=>"site in sites"}
          {{site.name}}
    %li.icons-users-disabled
  %div.lock.icons-lock-disabled

edited May 23 '17 at 12:07

Community

1
1

answered Jun 18 '14 at 06:19

colllin

9,442
9
49
65

Thank you for response.I can not change the structure but when I am using stopPropagation then It is not working for me. – Swapnil Patil Jun 18 '14 at 06:29
Are you using stopPropagation on the child? Not on the parent like @chandu shows? – colllin Jun 18 '14 at 06:30
I have given it like chandu mentioned => %li.icons-briefcase-static{'ng-click'=>"menuIconClick($event); $event.stopPropagation();"} – Swapnil Patil Jun 18 '14 at 06:30
Yeah that won't do anything for you. You want to call stopPropagation on the child element. `%li{'ng-click'=>'$event.stopPropagation();'} All Sites` – colllin Jun 18 '14 at 06:33

score 1 · Answer 2 · answered Jun 18 '14 at 06:17

1

Try his one. e.stopPropagation() I am not sure about this.

%li.icons-briefcase-static{'ng-click'=>"menuIconClick($event);$event.stopPropagation();"}

answered Jun 18 '14 at 06:17

chandu

2,276
3
20
35

I have given $event.stopPropagation(); But still that function is getting called on child li click. – Swapnil Patil Jun 18 '14 at 06:27
can you try with ng-click-active="$first". – chandu Jun 18 '14 at 06:35
This totally did it for me. Stopped other click events set on parent tags. – Don Simon Jan 27 '16 at 11:17

score 0 · Answer 3 · answered Jun 18 '14 at 06:41

0

Try this:

In html list,

ng-click="menuIconClick($event)"

 In JS function,

$scope.menuIconClick = function(ev){

ev.stopPropagation();

}

answered Jun 18 '14 at 06:41

Alagarasan M

907
8
16

ng-click event gets bind to child li in angular js

3 Answers3