특정 요소에 대해 ng-blur 이벤트 무시

아래에 제안 상자가있는 검색 필드가 있습니다. 검색 필드에 검색어를 입력하면 그 아래에 추천 검색어가 표시됩니다. 필드 외부를 클릭하면 제안 상자가 사라지게됩니다. 그리고 제안을 클릭하고 검색을 수행 할 수 있기를 원합니다.특정 요소에 대해 ng-blur 이벤트 무시

<input ng-blur="suggestionBox.hide()" ng-model='someModel' /> 

<div class='suggestion-box'> 
<ul> 
<li ng-repeat="suggestion in suggestions" ng-click="someFunction()">suggestion.name</li> 
</ul> 
</div>

문제 때문에 ng-blur의, ng-click가 트리거되지 않는 것입니다 - 제안 상자가 숨겨져되고 있지만, 클릭 이벤트가 트리거되지 않습니다. ng-click="$event.preventDefault(); someFunction()" 시도했지만 작동하지 않습니다. hide() 메서드에서 시간 초과를 설정하려고 시도했지만 작동하지만 200ms와 같은 큰 시간 제한을 설정해야하며 일반적으로 나쁜 해결책이라고 생각합니다.

편집 :

http://plnkr.co/edit/r3SlOXg6VuTZDABPCAxq?p=preview

기능은 실행 한 다음 드롭 다운 메뉴가 사라 : 나는 이것이 당신이 찾고있는 무슨 생각 때문에 http://plnkr.co/edit/9BR7Sv2502S87HO56Ofp?p=preview

출처

2014-07-25 tuks

당신이 jsbin을 설정하거나 바이올린 수 어쨌든 있나요? – bencripps

@bencripps here : http://plnkr.co/edit/9BR7Sv2502S87HO56Ofp?p=preview – tuks

좋아?

$ scope.show = function (item) { $ scope.hidden = true; 알리미 (상품) };

수정 HTML : 나는 짓을했는지

<input ng-model='search' /> 
<div ng-hide='hidden' style='border:1px solid black'>

출처

2014-07-25 14:47:12 bencripps

아니요, 입력란 외부를 클릭하면 상자가 사라집니다. – tuks

그래서 요소 바깥을 클릭하면 상자가 사라지지 않는다는 것을 제외하고는 올바르게 작동합니까? – bencripps

네, 당신이 그 문제를 이해한다고 생각하지 않습니다. 입력 필드 외부의 아무 곳이나 클릭하면 상자를 숨기고 싶습니다. ng-blur 속성으로 잘 작동하지만, li 요소를 클릭 했으므로 ng-click 이벤트가 시작되기 전에 상자가 사라집니다. – tuks

한 가지는 내가 및 onblur을 회피하면서 클릭 할 항목에 NG-mousedown 및 NG-와 mouseUp 기능을 제공한다. 나는 다른 방법을 찾지 못했습니다. 내 경우에는 일종의 취소 편집 버튼이었습니다.

mousedown에서 "inWhateverMode = true"플래그를 설정합니다. mousedown은 흐리기 전에 발생하기 때문에 중요합니다.
블러 처리기에서 inWhateverMode가 표시되는지 확인합니다.
mouseup에서 플래그를 정리하면 원하는 동작을 완료하십시오.

사용자가 버튼을 클릭 한 다음 처음 버튼에서 커서를 옮긴 다음 부정적인 영향없이 놓아두기를 원하면 편리합니다. 실수로 삭제 버튼을 클릭하는 것과 같습니다.

가 쿵하는 소리 업데이트 : http://plnkr.co/edit/raJzMor9ci8dLgzXuQII?p=preview

ng-mousedown='startToShowItem(item)' ng-mouseup='show(item)'

출처

2014-10-23 03:06:31 edcrates

특정 요소에 대해 ng-blur 이벤트 무시

답변

관련 문제