AngularJS don't trigger outer click event (nested ng-click)

Question

<ul>
    <li ng-init="hide1={state1:true}" ng-repeat="(id,name) in tree_root_list" ng-click="click_e_s_0(id,hide1)">
        {$ name[1] $}
        <ul ng-hide=hide1.state1>
            <li ng-init="hide2={state2:true}" ng-repeat="id in e_s_1" ng-click="click_e_s_1(hide2)">
                &ensp;{$ id $}
            </li>
        </ul>
    </li>
</ul>

When I trigger the click_e_s_1(hide2) event, Angular calls the click_e_s_0(id,hide1) event.

Actually I don't want to trigger click_e_s_0(id,hide1) event.

Answer 1

You are actutally trying to trigger a ng-click (click_e_s_1) imbricated in another ng-click (click_e_s_0). If you want to trigger only the imbricated one, you need to stop the propagation of the parent:

Inline solution

<li ... ng-click="click_e_s_1(hide2); $event.stopPropagation()">

In function solution

<li ... ng-click="click_e_s_1(hide2, $event)">

And update click_e_s_1:

$scope.click_e_s_1 = function(hide2, $event) {
    $event.stopPropagation(); 
    // Your stuff   
}