부모가 전파를 중단하기 때문에 각도 UI 부트 스트랩 드롭 다운이 닫히지 않습니다.

Question

래퍼와 함께 발생하는 다른 이벤트 때문에 이벤트 전파를 중지시키는 래퍼가 있습니다. 해당 래퍼에서 UI 부트 스트랩 드롭 다운을 사용하여 몇 가지 지시문을 얻었습니다.

문제는 이러한 클릭이 모든 클릭에서 종료되지 않는다는 것입니다. 다른 드롭 다운을 클릭하십시오.

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 특성을 토글해야합니다.

$document.on('click', closeDropdown); 

을하지만 동시에 $event.stopPropagation()있어서 실행되는 click 이벤트 방지 :

Answer 2

는 source code 따르면 드롭 소자의 개폐를위한 이벤트 핸들러는 window.document 소자 부착 받고있다. 그런 다음 당신이 기본적으로 document 요소를 click 이벤트 트리거 드롭 다운을 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