Angular js停止從Bootstrap“dropdown-toggle”事件傳播

Question

我有一個Angular JS 1.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>

其中切換打開詳細視圖。 工作良好。 但是現在我需要在每個td添加另一個項目，一個Bootstrap按鈕菜單：

<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，切換行狀態但從不打開我的菜單。 我怎么能阻止這個？

Answer 1

這是一個非常棘手的問題。 問題是，當您單擊菜單按鈕時會發生兩件事：第一件事是它打開Bootstrap下拉菜單，第二件事是該事件傳播到父元素並觸發showDetails = !showDetails 。

顯而易見的解決方案是嘗試在td級別使用$event.stopPropagation()停止事件傳播，以便事件不會冒出DOM樹並且永遠不會觸發父ngClick 。 不幸的是，它不起作用，因為Bootstrap在document元素上設置click事件監聽器以受益於冒泡，因此您無法停止傳播。

在這種情況下我提出的最簡單的解決方案是在原始事件對象上設置一個標志，無論事件是否發生在菜單按鈕上。 如果是這種情況， ngClick在tr上將不會做任何事情。

對於tr它看起來像這樣：

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

ans 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

Answer 2

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