Angular UI Bootstrap下拉菜单未关闭，因为父级停止传播

Question

我有一个包装器，可以停止事件传播，因为在包装器中和与包装器一起发生的其他事情。在这个包装器中，我得到了几个带有UI Bootstrap dropdowns的指令。

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

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

有什么办法来解决这个问题吗？

谢谢你的帮忙!

Answer 1

根据source code的说法，关闭dropdown元素的事件处理程序将附加到window.document元素：

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

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

如果您希望dropdown在此场景中触发事件，那么您可以将click事件绑定到基本上触发document element click事件的dropdown：

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

派生的

Answer 2

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

您需要停止包装器的传播，并使用一个变量来切换dropdown的is-open属性。