Angular js zatrzymanie propagacji od zdarzenia Bootstrap "dropdown-toggle"

Question

Mam aplikację Angular JS 1.3.

w nim mam wzmacniaka tabeli wiersza z ng kliknięcie:

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

które przełącza otwarcia w widoku szczegółowym. Działa w porządku. Ale teraz muszę dodać kolejny element w każdym z td S, A Bootstrap menu przycisk:

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

Problem jest, próbując kliknąć na ten przycisk menu zamiast wyzwala ng kliknięcie w rzędzie, przełączając wiersz stan, ale nigdy nie otwierając mojego menu. Jak mogę temu zapobiec?

Answer 1

To dość skomplikowany problem. Chodzi o to, że po kliknięciu przycisku menu zachodzą dwie rzeczy: pierwsza polega na tym, że otwiera się menu rozwijane Bootstrap, a druga to propagacja zdarzenia do elementu nadrzędnego, a także wyzwala showDetails = !showDetails.

Oczywistym rozwiązaniem jest, aby spróbować powstrzymać rozprzestrzenianie zdarzenia z $event.stopPropagation() na poziomie td tak, że zdarzenie nie bańka górę drzewa DOM i nigdy nie wyzwala rodzica ngClick. Niestety, nie zadziała, ponieważ Bootstrap ustawia detektor zdarzeń kliknięcia na elemencie document, aby czerpać korzyści z bąbelkowania, więc nie można zatrzymać propagacji.

Najprostszym rozwiązaniem, jakie wymyśliłem w takich przypadkach, jest ustawienie flagi na oryginalnym obiekcie zdarzenia, niezależnie od tego, czy zdarzenie wystąpiło w przycisku menu. W takim przypadku ngClick na tr nic nie da.

będzie to wyglądać tak dla tr:

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

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

Demo:http://plnkr.co/edit/eIn6VW3Y2jHn0MtJQVcU?p=preview

Answer 2

Z pomocą odpowiedź dfsq zdołała rozwiązać sam rodzaj problem w Angular 2. Oto mój przykładowy kod.

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