Clever Geek Handbook

Clickable button inside a clickable panel

I have a button inside an accordion, for example:

enter image description here

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?

+3


source to share


3 answers


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.

+8


source


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

+3


source


For me if I use both functions

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

nothing happened. So I only use

 $event.stopPropagation();

It works well.

0


source






More articles:


All Articles