Question

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

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

似乎UI Bootstrap Dropdown手表点击正文或其他东西来关闭所有下拉列表。

it

有什么想法可以解决这个问题吗？

感谢您的帮助！

Answer 1

根据source code，关闭dropdown元素的事件处理程序将附加到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>

Answer 2

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

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