I js angolari interrompono la propagazione dall'evento Bootstrap "dropdown-toggle"

Question

Ho un'app Angular JS 1.3.

In esso ho un ripetitore riga della tabella con una ng-clic:

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

che può essere settato l'apertura di una vista di dettaglio. Funziona bene. Ma ora ho bisogno di aggiungere un altro elemento in ciascuna delle td s, un menu di tasto 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> 

Il problema è che, cercando di fare clic su questo pulsante menu invece innesca la ng clic sulla riga, commutando la riga stato ma mai aprire il mio menu. Come posso evitare questo?

Answer 1

Questo è un problema piuttosto complicato. Il fatto è che quando si fa clic sul pulsante del menu succedono due cose: la prima è che apre il menu a discesa Bootstrap, la seconda è che l'evento si propaga all'elemento padre e attiva anche showDetails = !showDetails.

La soluzione più ovvia è quella di cercare di fermare la propagazione evento con $event.stopPropagation() a livello td, in modo che evento non bolla la struttura DOM e mai innesca genitore ngClick. Sfortunatamente, non funzionerà perché Bootstrap imposta il listener di eventi click sull'elemento document per trarre vantaggio dal bubbling, quindi non è possibile interrompere la propagazione.

La soluzione più semplice che ho trovato in questi casi è impostare un flag sull'oggetto evento originale se si è verificato un evento sul pulsante menu. Se questo è il caso, ngClick su tr non farà nulla.

Si sarà simile a questa per tr:

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

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

Con l'aiuto della risposta di dfsq sono riuscito risolvere lo stesso tipo di problema in Angular 2. Ecco il mio codice di esempio.

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