將按鈕添加到手風琴標題angular-ui bootstrap

Question

我試圖在手風琴標題上添加一個按鈕。但是當我點擊按鈕時，手風琴組合就會坍塌或打開。但是當我點擊按鈕時，我不想觸發手風琴的點擊。

如果我把button標籤放在accordion-heading裏面，它會把它放到accordion-toggle類中。所以它不會觸發按鈕點擊。不知道是否有簡單的方法來改變它。

http://plnkr.co/edit/eXE7JjQTMxn4dOpD7uKc?p=preview

任何人都可以幫助嗎？ 謝謝

Answer 1

添加$ event.stopPropagation（）;在ng-click中。 http://plnkr.co/edit/eXE7JjQTMxn4dOpD7uKc?p=preview

Answer 2

，或者可以創建爲進一步使用您的按鈕標籤的指令：

.directive('yourDirective',function(){ 
    return{ 
     restrict:'A',  
     link : function(scope,ele,attr){ 
      ele.bind("click",function(event){ 

      alert('I will not toggle accordion'); 
      event.preventDefault(); 
      event.stopPropagation(); 

      }) 
     } 
    } 

}) 

HTML

<button your-directive> Click Me <button> 

Answer 3

校驗標記解決方案並沒有爲我工作，直到我在$ event.stopPropagation（）之前添加了$ event.preventDefault（）。也許我得到了不同的結果，因爲我正在處理複選框或更新版本的Angular？

 <uib-accordion-heading> 
      {{ thisGroup.stringThatShouldOpenAndCloseTheHeader }} 

      <!-- my checkbox changes --> 
      <div class="material-switch pull-right"> 
      <input type="checkbox" id="{{ thisGroup._id }}" name="{{ thisGroup._id }}" ng-checked="thisGroup.active" /> 
      <label for="{{ thisGroup.template._id }}" ng-click="$event.preventDefault(); $event.stopPropagation(); $ctrl.checkOrUnCheck(arg)"></label> 
      </div> 

     </uib-accordion-heading> 

雖然我需要兩個。如果我刪除了，任何點擊複選框將打開或關閉手風琴