Angular UI Bootstrap Dropdown 不会关闭，因为父级停止传播答案

【问题标题】：Angular UI Bootstrap Dropdown doesn't close because parent stops propagationAngular UI Bootstrap Dropdown 不会关闭，因为父级停止传播
【发布时间】：2016-11-24 08:52:41
【问题描述】：

我有一个包装器，它可以阻止事件传播，因为该包装器中发生了其他事情。在那个包装器中，我得到了几个带有 UI Bootstrap 下拉菜单的指令。

问题是，这些下拉菜单不会在任何点击时关闭。只需单击另一个下拉菜单即可。

似乎UI Bootstrap Dropdown手表点击body或其他东西以关闭所有下拉菜单。

<div class="wrapper" ng-click="$event.stopPropagation()" style="width: 100%; height: 300px; background:grey;">
<div class="btn-group" uib-dropdown>
  <button id="split-button" type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger" uib-dropdown-toggle>
    <span class="caret"></span>
    <span class="sr-only">Split button!</span>
  </button>
  <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="split-button">
    <li role="menuitem"><a href="#">Action</a></li>
    <li role="menuitem"><a href="#">Another action</a></li>
    <li role="menuitem"><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li role="menuitem"><a href="#">Separated link</a></li>
  </ul>
</div>

https://plnkr.co/edit/bHHrpipM4MlxLNfOE2pt?p=preview

有解决这个问题的想法吗？

感谢您的帮助！

【问题讨论】：

标签： angularjs twitter-bootstrap angular-ui-bootstrap dropdown event-propagation

【解决方案1】：

根据source code，关闭下拉元素的事件处理程序正在附加到window.document元素：

$document.on('click', closeDropdown);

但同时$event.stopPropagation() 方法阻止click 事件被执行。

如果您希望下拉菜单在这种情况下触发事件，那么您可以将click 事件绑定到基本上触发document 元素click 事件的下拉菜单：

$scope.dropDownClick = function($event) {
    angular.element(document).triggerHandler('click');
};

下拉元素

<ul class="dropdown-menu" ng-click="dropDownClick($event)" uib-dropdown-menu role="menu" aria-labelledby="split-button">
   ...
</ul>

分叉plunker

【讨论】：

【解决方案2】：

您可以使用的解决方法显示在此工作plnkr。

您需要停止包装器的传播并使用变量来切换下拉列表的is-open 属性。

【讨论】：