$event.stopPropagation 不适合 Bootstrap 数据切换

Question

我有一个元素列表，每个元素都包含一个 ng-click。嵌套在每个元素内的是一个 div，它应该切换 Bootstrap 模式。

我已将 $event.stopPropagation 添加到嵌套 div 中，因为我不希望父元素中的 ng-click 事件触发，但这会导致模式无法开始显示。

    <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>

有任何已知的解决方法吗？

我也许应该提到 stopPropagation() 的工作原理是防止点击事件触发。我的问题是引导模式没有通过 data-toggle 属性激活

Answer 1

您是否尝试过使用指令

<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();
                });
        }
    };
 });

查看SO链接How can I make an AngularJS directive to stopPropagation?