Question

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

我已将$ 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（）可以防止点击事件被触发。我的问题是没有通过数据切换属性

激活bootstrap模式

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?

$ event.stopPropagation对Bootstrap数据切换不起作用

1 个答案: