Угловой UT Bootstrap Dropdown не закрывается, потому что родительский запрещает распространение

Question

У меня есть оболочка, которая останавливает распространение событий из-за других вещей, происходящих в этой оболочке и с этой оболочкой. В этой обертке я получил несколько директив с выпадающими списками UI Bootstrap.

Проблема в том, что эти выпадающие списки не закрываются ни на один клик. Только нажав другой раскрывающийся список.

Кажется, что UI Bootstrap Dropdown часы нажимают на тело или что-то, чтобы закрыть все выпадающие списки.

<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'); 
}; 

Dropdown элемент

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

раздвоенного plunker