AngularJS 不触发外部点击事件（嵌套的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>

当我触发 click_e_s_1(hide2) 事件时，Angular 调用 click_e_s_0(id,hide1) 事件。

其实我不想触发click_e_s_0(id,hide1)事件。

Answer 1

使用

ng-click="click_e_s_1(hide2, $event)"

并在 click_e_s_1 函数中，使用

$event.stopPropagation();

Answer 2

你实际上是在试图触发一个 ng-click (click_e_s_1) 嵌套在另一个 ng-click (click_e_s_0) 中。如果你只想触发叠瓦式的，你需要stop the propagation父级：

内联解决方案

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

函数解

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

并更新 click_e_s_1:

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

AngularJS 不触发外部点击事件（嵌套的ng-click）

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

javascript

event-propagation

angularjs

angularjs-ng-click

内联解决方案

函数解