드롭 다운 메뉴 (AngularJS 필터 요소) 내의 입력 필드에서 클릭 이벤트를 중지하십시오.

Question

입력 필드가있는 드롭 다운 메뉴를 사용하여 li 요소를 검색했습니다. 문제는 다음과 같습니다. 입력 필드를 클릭하여 내 검색어에 넣으면 클릭 이벤트가 발생하고 드롭 다운 메뉴가 사라집니다.

입력 필드에서 preventDefault를 시도했지만 작동하지 않았습니다. 어떻게 행동을 멈출 수 있습니까?

는 여기에 Plunker에게있다 : http://plnkr.co/edit/SlbWZ5Bh62MDKWViUsMr

여기 (그것은 NG 모델 = "customerFilter"을 입력입니다) 내 마크 업입니다 :

<div class="button"> 
    <a class="btn btn-large grey dropdown-toggle" data-toggle="dropdown" href="#"> 
    Organisation 
    </a> 
    <ul class="dropdown-menu grey" > 
    <input type="text" ng-model="customerFilter"> 
    <li ng-repeat="customer in customers | filter:customerFilter | orderBy:sortorder" ng-click="addCardGrey(customer)">{{ customer.name }}</li> 
    </ul> 
</div> 

사전에 대단히 감사합니다!

Answer 1

preventDefault은 해당 이벤트에서 브라우저가 수행하는 기본 작업을 중지합니다.

사용하려는 것은 stopPropagation입니다.이 경우 이벤트가 이벤트 체인 위로 버블 링하지 않습니다.

당신은 예를 들어 다음과 같은 지시문에서 사용할 수 있습니다 :

코드 :

이

.directive('myInput', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element) { 
      element.bind('click', function (event) { 
       event.stopPropagation(); 
      }); 
     } 
    }; 
}); 

마크 업 : 당신은 아마 angularui 프로젝트에서 살펴 봐야 할

<input type="text" ng-model="customerFilter" my-input>