两个带有angularjs的嵌套单击事件

Question

我有这样的HTML结构：

<div ng-click="test()">
    <div id="myId" ng-click="test2()"></div>
    <div></div>
    ...
</div>

当前，当我单击div带有ID的时，myId两个函数都被触发，但是我希望那个test2函数被触发。我怎样才能做到这一点？

Answer 1

您需要做的就是停止事件传播/冒泡。

此代码将帮助您：

<div ng-click="test()">ZZZZZ
    <div id="myId" ng-click="test2();$event.stopPropagation()">XXXXX</div>
    <div>YYYYYY</div>
    ...
</div>

如果您的test和test2函数如下所示，则test2单击myIdDIV
时您只会进入控制台。如果没有，$event.stopPropagation()您将在控制台输出窗口中test2跟随test。

$scope.test = function() {
    console.info('test');
}
$scope.test2 = function() {
    console.info('test2');
}