Выпадающий список Bootstrap Angular UI не закрывается, потому что родитель останавливает распространение

У меня есть оболочка, которая останавливает распространение событий из-за других вещей, происходящих в этой оболочке и с ней. В этой обертке я получил несколько директив с раскрывающимися списками 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

Любые идеи, чтобы решить эту проблему?

Спасибо за вашу помощь!


dropdown angularjs twitter-bootstrap event-propagation angular-ui-bootstrap
person shooby    schedule 24.11.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Согласно исходному коду событие обработчик закрытия раскрывающегося списка привязывается к элементу 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>

Разветвленный плункер

person Vadim Gremyachev    schedule 24.11.2016

arrow_upward
1
arrow_downward

Обходной путь, который вы могли бы использовать, показан в этом рабочем plnkr.

Вам нужно остановить распространение оболочки и использовать переменную для переключения атрибута is-open раскрывающегося списка.

person Olezt    schedule 24.11.2016