Açısal js, Bootstrap "dropdown-toggle" olayından yayılımı durdurur

Question

Angular JS 1.3 uygulamasına sahibim. bir ayrıntı görünümü açarak etkin kılmak

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

: İçinde

Bir ng-tıklama ile bir tablo satırı repeater var. İyi çalışıyor. satır geçiş, satırda ng tıklama yerine bu menü düğmesine tıklayın çalışırken,

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

Sorun tetikler: Ama şimdi td s, bir Bootstrap düğme menü her birinde başka bir öğe eklemek gerekir devlet ama asla menüyü açmıyor. Bunu nasıl önleyebilirim?

Answer 1

Bu oldukça zor bir sorundur. Öyle ki, menü düğmesine tıkladığınızda iki şey olur: Birincisi, Bootstrap açılır menüsünü açar, ikincisi ise bu olay ana öğeye yayılır ve ayrıca showDetails = !showDetails'u tetikler.

bariz çözüm td düzeyde $event.stopPropagation() ile olay yayılmasını durdurmak için, bu yüzden bu olay kabarcık kadar DOM ağacını değil ve ebeveyn ngClick tetikler olmadı. Ne yazık ki, Bootstrap, köpürme işleminden faydalanmak için document öğesinde tıklama olayı dinleyicisini ayarladığı için çalışmaz, bu nedenle yayılmayı durduramazsınız.

Böyle durumlarda ortaya koyduğum en basit çözüm, menü olayında olayın gerçekleşip gerçekleşmediğine dair orijinal olay nesnesine bir bayrak ayarlamaktır. Bu durumda, tr numaralı telefondan ngClick, bir şey yapmayacaktır.

O tr için aşağıdaki gibi görünecektir: button için

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

ans:

<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

dfsq cevabı yardımıyla ben aynı tür çözmek yönetilen Angular 2'deki sorun. İşte örnek kodum.

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