Event handler functions of nested components called


UPDATE: Please ignore. I have found the solution.

I have this GUI design, where a list item has a small button on its right:

  <ion-item class="item-button-right" ng-click="doSomething()">
    Do something
    <button class="button button-positive" ng-click="showPopup()"> 
      <i class="icon ion-gear-a"></i>

$scope.doSomething = function(){
  console.log("doSomething called.");

$scope.showPopup = function() {
  console.log("showPopup called.");

I tested it on both phone and desktop browser with different outcome. It consistently shows both showPopup() and doSomething() get called, even when I deliberately tap on the inner right button only to show popup. I am thinking if there’s a need to return false or invoke a e.preventDefault() within showPopup().

Is there some way to prevent the doSomething() for the outer list item to be run if I only tap on the right inner popup button?


What is the solution you found?


I need to call $event.stopPropagation() inside showPopup() for the button to prevent the click event from propagating upward to the parent list item doSomething() ng-click handler.