Angular js从Bootstrap“dropdown-toggle”停止传播。事件 [英] Angular js stop propagation from Bootstrap "dropdown-toggle" event

问题描述

我有一个Angular JS 1.3应用程序。

I have an Angular JS 1.3 app.

在其中我有一个带有ng-click的表行转发器：

In it I have a table row repeater with an 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>

切换打开详细视图。工作良好。但现在我需要在每个 td 中添加另一个项目，一个Bootstrap按钮菜单：

Which toggles opening a detail view. Works fine. But now I need to add another item in each of the tds, a Bootstrap button menu:

<td>
<div class="btn-group">
  <div ng-switch on="user.status">
    <button class="btn btn-link btn-gear dropdown-toggle" type="button" data-toggle="dropdown"><i class="fa fa-cog"></i></button>

      <ul class="dropdown-menu dropdown-menu-right" role="menu" ng-switch-when="Inactive">
        <li><a href="" ng-click="users.modals.deleteUser()">Delete</a></li>
      </ul>

      <ul class="dropdown-menu dropdown-menu-right" role="menu" ng-switch-when="Invited">
        <li><a href="" ng-click="users.toast.resendInvite()">Resend invitation</a></li>
        <li><a href="" ng-click="users.modals.deleteUser()">Delete</a></li>
      </ul>

      <ul class="dropdown-menu dropdown-menu-right" role="menu" ng-switch-default>
        <li><a href="" ng-click="users.toast.sentPassword()">Reset password</a></li>
        <li><a href="" ng-click="users.modals.deleteUser()">Delete</a></li>
      </ul>
  </div>
</div>
</td>

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

Problem is, trying to click on this menu button instead triggers the ng-click on the row, toggling the row state but never opening my menu. How can I prevent this?

推荐答案

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

This is pretty tricky problem. The thing is that when you click menu button two things happens: the first is that it opens Bootstrap dropdown menu, and the second is that event propagates to the parent element and also triggers showDetails = !showDetails.

显而易见的解决方案是尝试在<$ c上使用 $ event.stopPropagation（）停止事件传播$ c> td 级别，以便该事件不会冒出DOM树并且永远不会触发父 ngClick 。不幸的是，它不起作用，因为Bootstrap在文档元素上设置click事件监听器以受益于冒泡，因此您无法停止传播。

The obvious solution is to try to stop event propagation with $event.stopPropagation() on the td level, so that event doesn't bubble up the DOM tree and never triggers parent ngClick. Unfortunately, it will not work because Bootstrap sets up click event listener on the document element to benefit from bubbling, so you can't stop propagation.

在这种情况下，我提出的最简单的解决方案是在原始事件对象上设置一个标志，无论事件是否发生在菜单按钮上。如果是这种情况 ng tr 将无法执行任何操作。

The simplest solution I came up with in such cases is to set a flag on the original event object whether event occurred on the menu button. If this is the case ngClick on the tr won't do anything.

对于 tr ，它将如下所示：

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

ans for button ：

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

演示： http://plnkr.co/edit/eIn6VW3Y2jHn0MtJQVcU?p=preview

这篇关于Angular js从Bootstrap“dropdown-toggle”停止传播。事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！