Angular -ui bootstrap accordion header button

Question

I am trying to add a button to the title of the accordion. but when I press the button, the accordion group collapses or opens. but I don’t want to trigger the accordion click when I press the button.

If I put the button tag in the title of the accordion, it will put it in the class of the accordion. therefore, it will not trigger a button click. not sure if there is an easy way to change it.

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

Can anybody help? Thanks

Answer 1

$event.stopPropagation(); ng-. 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.preventDefault() $event.stopPropagation(). , , 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>

, . ,