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

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

hey binding menuiconclick($event) function on li using ng-click directive.but gets bind kid li also. code follow

%div.sidenavbar %ul.navbar %li.icons-briefcase-static{'ng-click'=>"menuiconclick($event)"} // binding here %ul.submenu %li sites // gets phone call here %li{'ng-repeat'=>"site in sites"} {{site.name}} %li.icons-users-disabled %div.lock.icons-lock-disabled

the template in haml. didn't got why?

any help appreciated

try putting icon & icon click event separate element, not on parent element. dom events bubble hierarchy, if parent element has ng-click handler, clicking kid element trigger parent click handler unless stop event propagation.

you either stop event propagation, similar to:

angularjs ng-click stoppropagation

or alter dom construction briefcase icon not parent of submenu:

%div.sidenavbar %ul.navbar %li %a.icons-briefcase-static{'ng-click'=>"menuiconclick($event)"} // no longer parent %ul.submenu %li sites // click here won't bubble ng-click %li{'ng-repeat'=>"site in sites"} {{site.name}} %li.icons-users-disabled %div.lock.icons-lock-disabled

javascript angularjs haml angularjs-ng-click