Angular UI引導下拉不會關閉，因爲父停止傳播

Question

我得到一個封裝，停止事件傳播，因爲其他事情發生在該包裝。在那個包裝器中，我得到了一些UI Bootstrap下拉指令。

問題是，這些下拉列表不會在任何點擊時關閉。只有通過點擊另一個下拉菜單。

看起來，UI引導下拉手錶點擊身體或某物關閉所有下拉菜單。

<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

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

您需要停止包裝器的傳播並使用變量切換下拉菜單的is-open屬性。

Answer 2

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