親が繁殖を停止するため、Angular UI Bootstrapドロップダウンが終了しない

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

ドロップダウン要素

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

がplunker

を二股