부트스트랩(UI Bootstrap)을 사용하여 드랍다운(Dropdown) 박스 형태의 인터페이스를 구현한 뒤 메뉴를 선택할 경우 드랍다운 메뉴가 닫혀야하나 닫히지 않는 경우가 발생할 수 있습니다.

이 문제는 ng-click이 설정된 경우 드랍다운 메뉴를 컨트롤하는 이벤트 보다 먼저 실행되어 나타나는 이슈로 이를 해결하기 위한 방법으로 아래와 같은 방법이 존재합니다.


# dropdown-toggle 디렉티브 추가하기
아래와 같이 해당하는 a 태그에 추가로 dropdown-toggle 디렉티브(속성)를 추가하는 방법이 가장 간단한 방법입니다. 

<li>
  <a dropdown-toggle ng-click="event01">Menu 01</a>
  <a dropdown-toggle ng-click="event02">Menu 02</a>
</li>

dropdown-toggle 디렉티브를 추가하는 방법이 가장 간단하고 쉬운 방법입니다. 또 다른 방법으로 a 태그를 다른 태그(Ex. span)로 변경하는 방법이 있습니다. 예를들면...


# a 태그를 다른 태그로 대체하는 방법
아래의 예제는 a 태그를 span 태그로 대체하였습니다.

<!-- 변경 전 코드 -->
<li>
  <a ng-click="event01">Menu01</a>
</li>

<!-- 아래처럼 변경 후 적용하기 -->
<li>
  <span ng-click="event01">Menu01</a>
</li>

코드 스니펫 widget