$event.stopPropagation doesn't play nice with Bootstrap data-toggle

Question

I have a list of elements, each containing a ng-click. Nested inside each element is a div that should toggle a Bootstrap modal.

I have added the $event.stopPropagation to the nested div because i don't want the ng-click event from the parent element to fire, but this causes the modal to not begin displayed.

    <div id="segment{{segment.Id}}" class="message" ng-class="{activeSegment: segment.Selected}" ng-click="!segmentIsLoaded || selectSegment(segment)">
        <div>
             <div class="pull-left">
                 <span>ID: {{segment.Id}}</span>
                 <span>{{segment.Name}}  </span>
                 <i class="fa fa-info-circle fa-lg" data-toggle="tooltip" data-original-title="{{segment.Description}}" tooltip></i><br />
                                        <small>{{formatJsonDate(segment.Updated)}}</small>
              </div>
              <div class="btn btn-danger pull-right" data-toggle="modal" data-target="#deleteSegmentModal" ng-click="$event.stopPropagation();">
                   <span><i class="fa fa-trash-o" aria-hidden="true"></i></span>
              </div>
         </div>
     </div>

Any known work-arounds for this?

I should perhaps mention that the stopPropagation() works as far as preventing the click event from firing. My issue is with the bootstrap modal not being activated through data-toggle attribute

_"Any known work-arounds for this?"_ Open the modal programmatically. _Nested inside each element is a button"_ No, there isn't. — a better oliver, May 04 '17 at 09:28
_Nested inside each element is a button_ changed it to _Nested inside each element is a **div**_ Happy? — Jan Molbech, May 04 '17 at 09:40

score 1 · Accepted Answer · edited May 23 '17 at 12:26

1

Have you tried using a directive

<a ng-click='expression' stop-event='click'>
.directive('stopEvent', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if(attr && attr.stopEvent)
                element.bind(attr.stopEvent, function (e) {
                    e.stopPropagation();
                });
        }
    };
 });

check SO link How can I make an AngularJS directive to stopPropagation?

edited May 23 '17 at 12:26

Community

1
1

answered May 04 '17 at 08:52

Nair Athul

823
9
21

Could you explain why, using a directive, would stop angular from inferring with the Bootstrap data-toggle event? – Jan Molbech May 04 '17 at 09:22

$event.stopPropagation doesn't play nice with Bootstrap data-toggle

1 Answers1