Prevent parent onclick event propagation from child element with bootstrap modal

Question

Prevent parent onclick event propagation from child element with bootstrap modal

I'm using angularjs + bootstrap and have nested onclick events (using angular's ng-click)inside different html elements, first on a table's header to display different sort icons and run the sort logic when the header's clicked and another inside an anchor element (icon) within the same header to open a modal and call some function as you can see from code below...

The problem is that I'm using bootstrap's data-toggle and data-target attribute to open up a modal as well on the anchor...I only need to run the anchor's function and open up the modal on the anchor's onclick event but since the anchor is inside the parent header the header's onclick is being propagated as well....I tried $event.stopPropagation on the ng-click of the anchor element but if I do that the modal won't appear probably because I'm using bootstrap's data-toggle and data-target attribute to open the modal...what would be some of the workarounds to obtain my goal of- Just to open the modal + invoke the anchor's onclick event?

Any help would be greatly appreciated.

<th class="col-md-3"
    ng-click="sort.predicate = 'endDate'; sort.reverse=!sort.reverse;">
    End Date
  <a class="pull-right" data-toggle="modal" data-target="#GroupsModal"
     ng-click="$broadcast('someEvent');">
    <span class="fa fa-plus fa-lg"></span>
  </a>
  <span id="sortup_endDate" class="pull-right"
       ng-hide="sort.predicate != 'endDate' || sort.reverse">
    <img src="...../img/asc.gif" alt="" />
  </span>

  <span id="sortdown_endDate" class="pull-right"
      ng-hide="sort.predicate != 'endDate' || !sort.reverse">
      <img src="...../img/desc.gif" alt="" />
  </span>
</th>

javascript
html
angularjs
twitter-bootstrap
dom

Answer 1

Have you tried changing the z-index of the icon?

THIS IS AN EXAMPLE, so don't use inline CSS in your app.

<th class="col-md-3"
    ng-click="sort.predicate = 'endDate'; sort.reverse=!sort.reverse;">
    End Date
  <a class="pull-right" data-toggle="modal" data-target="#GroupsModal"
     ng-click="$broadcast('someEvent');"
     style="z-index: 1;">
    <span class="fa fa-plus fa-lg"></span>
  </a>
  <span id="sortup_endDate" class="pull-right"
       ng-hide="sort.predicate != 'endDate' || sort.reverse">
    <img src="...../img/asc.gif" alt="" />
  </span>

  <span id="sortdown_endDate" class="pull-right"
      ng-hide="sort.predicate != 'endDate' || !sort.reverse">
      <img src="...../img/desc.gif" alt="" />
  </span>
</th>

Answer 2

I bumped into a similar issue at work the other day.

Loot at the source of Bootstrap Modal (https://github.com/twbs/bootstrap/blob/master/js/modal.js#L320). The author is using on on document, which makes sense. However, if you invoke $event.stopPropagation on event handlers bound on any elements below document, it will prevent the delegated handler from triggering, so the modal won't show up.

One simple solution would be to not use Bootstrap's data attribute api, create a directive to manually open the modal instead:

myApp.directive('modal', function() {
  return {
    link: function(scope, element, attr) {
      element.click(function(e) {
        e.stopPropagation();
        $(attr.modal).modal();
      });
    }
  };
});

And update the html:

<a class="pull-right" modal="#GroupsModal" ng-click="$broadcast('someEvent');">
  <span class="fa fa-plus fa-lg"></span>
</a>

Here's a simplified jsfiddle demonstrating the not working case. http://jsfiddle.net/gL3gaeL3/

Then the working case. http://jsfiddle.net/gL3gaeL3/2/

Hope this helps.