Add button to accordion heading angular-ui bootstrap

Question

I'm trying to add a button on the accordion heading. but when I click on the button, the accordion group collapse or open. but i dont want to trigger the accordion click when I click on the button.

If i put the button tag inside accordion-heading, it will put that into accordion-toggle class. so it wont trigger the button click. not sure if there is an easy way to change it.

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

Anyone can help? Thanks

Answer 1

Add $event.stopPropagation(); in the ng-click. http://plnkr.co/edit/eXE7JjQTMxn4dOpD7uKc?p=preview

Answer 2

The check marked solution didn't work for me, until I added $event.preventDefault() before $event.stopPropagation(). Maybe I got different results because I'm dealing with a check box or a newer version of 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>

I needed BOTH, though. If I removed either, any clicking on the checkbox would open or close the accordion

Answer 3

or you can create a directive in your button tag for further usage :

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