Clickable button inside of a clickable panel

Question

I have a button inside of an accordion, like this:

I made the entire accordion head clickable by doing this:

<accordion-heading ng-click="isopen=!isopen">
    <div>
        <span class="accordion-header">
            <i class="pull-right glyphicon"
               ng-class="{'glyphicon-chevron-down': accordionOpen,
               'glyphicon-chevron-right': !accordionOpen}"></i>
        </span>
        <button class="delete-button" ng-click="remove()">Delete</button>
    </div>
</accordion-heading>

The problem I have is when I click the delete button, remove() is called AND the accordion open/closes.

Is there a way to stop the accordion header from opening/closing when I click the delete button?

Answer 1

You can use $event.preventDefault(); $event.stopPropagation();:

<button class="delete-button" ng-click="
  $event.preventDefault(); $event.stopPropagation(); remove()">Delete</button>

The click event object is accessible in ng-click as $event. preventDefault and stopPropagation will stop the event from reaching the accordion-heading click handler.

Answer 2

You need to stop the event from bubbling to the container

$scope.remove = function(event) {
  event.preventDefault();
  event.stopPropagation();
  ...
}

and

<button class="delete-button" ng-click="remove($event)">Delete</button>

Demo: plnkr

Answer 3

For me, if I use both functions

$event.preventDefault();
$event.stopPropagation();

nothing happened at all. So I use only

 $event.stopPropagation();

It works good.