SwimmingG SwimmingG - 1 year ago 80
AngularJS Question

overriding parent ng-click in child element

This is a pretty simple question. I have a list with icons on each list element, when I click the actual list element I want to call one function, when I click the icon I want to call another function. Currently when I click the icon it is calling both functions.


<li ng-click="ctrl.foo()"><i ng-click="ctrl.bar()"></i><li>

currently calls ctrl.foo() and ctrl.bar() when it should just call ctrl.bar().

Answer Source

If you give ng-click attribute to <li> element, it applies to all elements inside it. If you want to something like text-icon and separate their functions, you can use something like that

<li><span ng-click="foo()">Text</span> <i ng-click="bar()"></i> </li>