कोणीय जेएस बूटस्ट्रैप "ड्रॉपडाउन-टॉगल" घटना

Question

से प्रसार रोकना मेरे पास एक कोणीय जेएस 1.3 ऐप है।

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

समस्या है, तब यह मेनू बटन पर क्लिक करने की कोशिश कर रहा: लेकिन अब मैं td रों, एक बूटस्ट्रैप बटन मेनू में से प्रत्येक में एक और आइटम जोड़ने की जरूरत राज्य लेकिन मेरा मेनू कभी नहीं खोल रहा है। मेरे द्वारा इसे कैसे रोका जा सकता है?

Answer 1

यह बहुत मुश्किल समस्या है। बात यह है कि जब आप मेनू बटन पर क्लिक करते हैं तो दो चीजें होती हैं: पहला यह है कि यह बूटस्ट्रैप ड्रॉपडाउन मेनू खोलता है, और दूसरी बात यह है कि यह ईवेंट पैरेंट तत्व को प्रसारित करता है और showDetails = !showDetails ट्रिगर करता है।

स्पष्ट समाधान td स्तर पर $event.stopPropagation() के साथ घटना प्रसार को रोकने के लिए प्रयास करने के लिए है, इसलिए कि ईवेंट बबल सामने डोम पेड़ नहीं है और माता पिता के ngClick चलाता है कभी नहीं। दुर्भाग्यवश, यह काम नहीं करेगा क्योंकि बूटस्ट्रैप बुलबुले से लाभ उठाने के लिए document तत्व पर इवेंट श्रोता क्लिक करता है, इसलिए आप प्रचार को रोक नहीं सकते हैं।

आसान समाधान मैं ऐसे मामलों में के साथ आया था मूल घटना वस्तु है कि क्या घटना मेनू बटन पर हुआ पर एक ध्वज स्थापित करने के लिए है। यदि tr पर यह ngClick है तो कुछ भी नहीं करेगा।

यह tr के लिए इस तरह दिखेगा: button के लिए

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

उत्तर:

<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 के जवाब की मदद से मैं एक ही प्रकार का समाधान कामयाब कोणीय में समस्या 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">