Baby ng-click doesn't shoot

Question

I have nested elements ul \ li. I have the same ng-click for all li elements. For some reason, if I click on the li element that is nested under another li element, only the parent is launched. In the example below, when I click on the “Sub One” li element, it twice launches the “Two” li element. I know how to stop the distribution, but it still starts the parent ng-click. Hope this makes sense.

<ul> <li ng-click="doSomething()">One</li> <li ng-click="doSomething()">Two <ul> <li ng-click="doSomething()">Sub One</li> <li ng-click="doSomething()">Sub Two</li> </ul> </li> <li ng-click="doSomething()">Three</li> </ul> 

Answer 1

You probably did something wrong because it works just fine. According to this question, just use $event.stopPropagation() . Try this script , for example:

 <ul ng-app="test" ng-controller="MyCtrl"> <li ng-click="doSomething($event, 1)">One</li> <li ng-click="doSomething($event, 2)">Two <ul> <li ng-click="doSomething($event, 21)">Sub One</li> <li ng-click="doSomething($event, 22)">Sub Two</li> </ul> </li> <li ng-click="doSomething($event, 3)">Three</li> </ul> 

and:

 function MyCtrl($scope) { $scope.doSomething = function ($event, test) { console.log(test); $event.stopPropagation(); } } 

Then click “Sub One,” just show 21 on the console.