Question

我使用angularjs + bootstrap并在不同的html元素中嵌套了onclick事件（使用angular＆＃39; s-click），首先在表格的标题上显示不同的排序图标并运行当标题被点击时排序逻辑，而另一个标题位于同一标题内的锚元素（图标）中以打开模态并调用某些函数，如下面的代码所示...

问题在于我使用bootstrap的数据切换和数据目标属性来打开锚点上的模态......我只需要运行锚点即可函数并在锚点的onclick事件中打开模态，但由于锚点位于父标题内，标题的onclick也正在传播....我尝试了$ event.stopPropagation on ng-点击锚元素，但如果我这样做，模态不会出现可能是因为我使用bootstrap的数据切换和数据目标属性来打开模态...会是什么获得我的目标的解决方法 - 只是打开模态+调用锚点的onclick事件？

非常感谢任何帮助。

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

Answer 1

您是否尝试过更改图标的z-index？

这是一个示例，因此请勿在您的应用中使用内联CSS。

<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

前几天我在工作中碰到了类似的问题。

在Bootstrap Modal（https://github.com/twbs/bootstrap/blob/master/js/modal.js#L320）的源头进行抢夺。作者在on上使用document，这是有道理的。但是，如果在绑定在$event.stopPropagation下面的任何元素上的事件处理程序上调用document，它将阻止委托处理程序触发，因此模式将不会显示。

一个简单的解决方案是不使用Bootstrap的数据属性api，创建一个指令来手动打开模态：

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

并更新html：

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

这是一个简化的jsfiddle，演示了不工作的情况。 http://jsfiddle.net/gL3gaeL3/

然后是工作案例。 http://jsfiddle.net/gL3gaeL3/2/

希望这有帮助。

使用bootstrap模式阻止来自子元素的父onclick事件传播

2 个答案: