Clickable button inside a clickable panel
I have a button inside an accordion, for example:
I made the whole accordion in a click 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 is when I click the delete button () is called and the accordion opens / closes.
Is there a way to stop the accordion title from opening / closing when I press the delete button?
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 available in ng-click as $event
. preventDefault and stopPropagation will stop the event from reaching the click handler for the accordion title.
You need to stop the event from bubbles in the container
$scope.remove = function(event) {
event.preventDefault();
event.stopPropagation();
...
}
and
<button class="delete-button" ng-click="remove($event)">Delete</button>
Demo: plnkr
For me if I use both functions
$event.preventDefault();
$event.stopPropagation();
nothing happened. So I only use
$event.stopPropagation();
It works well.