angularjs - 子 ng-click 未触发

Question

我嵌套了 ul\li 元素。我对所有 li 元素都有相同的 ng-click。出于某种原因，如果我单击嵌套在另一个 li 元素下的 li 元素，则只会触发父元素。在下面的例子中，当我点击“Sub One”li 元素时，它会触发“Two”li 元素两次。我知道如何停止传播，但它仍然会触发父 ng-click。希望这是有道理的。

<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

你可能做错了什么，因为它工作得很好。根据这个问题，简单地使用$event.stopPropagation(). 例如试试这个小提琴：

<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>

和 ：

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

然后单击“Sub One”，在控制台中只显示 21。