Javascript 角js停止自举传播“；下拉开关；事件

我有一个角度JS1.3应用程序

其中我有一个带有ng click的表行中继器：

<tr ng-repeat-start="user in users.users" ng-click="showDetails = !showDetails">
 <!-- main row, with the menu td shown below -->
<tr class="row-details" ng-show="showDetails" ng-class="{ 'active': showDetails }">
    <td>this is the row that hows details</td>
</tr>
<tr ng-repeat-end></tr>

---

问题是，尝试单击此菜单按钮会触发对行的ng单击，切换行状态，但从不打开我的菜单。如何防止这种情况发生？

这是一个相当棘手的问题。当您单击菜单按钮时，会发生两件事：第一件事是它打开引导下拉菜单，第二件事是事件传播到父元素并触发

showDetails=！显示详细信息

显而易见的解决方案是尝试在

td

级别上使用

$event.stopPropagation（）

停止事件传播，这样事件就不会在DOM树上冒泡，也不会触发父

ngClick

。不幸的是，它将不起作用，因为Bootstrap在

document

元素上设置了click事件监听器，以从冒泡中获益，所以无法停止传播

在这种情况下，我提出的最简单的解决方案是在原始事件对象上设置一个标志，以确定事件是否发生在菜单按钮上。如果是这种情况，

ng单击
tr
上的
将不起任何作用

对于
tr
，它将如下所示：

<tr ng-repeat-start="user in users.users" ng-click="$event.originalEvent.dropdown || (showDetails = !showDetails)">

演示：
借助dfsq的答案，我成功地解决了Angular 2中的同类问题。这是我的示例代码

<td class="tablerowdata" (click)="$event.dropdown || onSelect(track)" >

<button (click)="$event.dropdown = true" type="button" class="btn btn-default dropdown-toggle trackbuttons" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">


每个td都有菜单按钮？是。我们决定，除了能够打开表格行的详细信息外，还需要一个“快速菜单”来直接执行一些操作。你能为td元素和下拉菜单提供更多的代码吗？我用更多的codeGenius充实了我的问题。那很聪明。我永远也猜不到，谢谢。你我的朋友是个天才！这正是我所需要的，也是一个非常简单的解决方案！
<button ng-click="$event.originalEvent.dropdown = true" class="btn btn-link btn-gear dropdown-toggle" type="button" data-toggle="dropdown">
    <i class="fa fa-cog"></i>
</button>

<td class="tablerowdata" (click)="$event.dropdown || onSelect(track)" >

<button (click)="$event.dropdown = true" type="button" class="btn btn-default dropdown-toggle trackbuttons" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">