사용자 지정 지시문 내에서 ui-select에 이벤트 수신기 추가

Question

ui-select을 사용하는 사용자 지정 지시문이 있습니다. 내 지시문에 내부 클래스가 포커스를 가져 와서 흐리게 처리 할 때 CSS 클래스를 적용하려고합니다. ui-select에는 포커스가 없거나 이벤트 청취자가 흐려 지므로 내 자신을 추가하고 싶습니다. 내 지시문의 링크 함수에 이벤트 리스너를 추가하지만 Chrome에서 앱을 열고 개발자 도구를 사용하여이 요소의 이벤트 리스너를 볼 때 내 위치는 없습니다. 나는이 문제를 연구하려고 노력했지만 비슷한 것을 찾을 수 없었다. 어떤 도움을 많이 주시면 감사하겠습니다!

내 지시어의 HTML :

<div class="floating-ui-select-container"> 

<div class="floating-ui-select" ng-model="vm.value" ng-class="{active: vm.focus}"> 
    <div class="floating-label no-highlight" ng-class="{active: vm.focus}"> 
      {{vm.floatingLabel}} 
    </div> 

    <ui-select on-select="vm.onSelection({item: $item})"> 
     <ui-select-match placeholder="">{{$select.selected.name}}</ui-select-match> 
     <ui-select-choices repeat="item in vm.menuItems | filter: $select.search"> 
      <span>{{item.name}}</span> 
     </ui-select-choices> 
    </ui-select> 

</div> 
</div> 

내 지시어의 링크 기능 :

function link(scope, element, attrs, controller) { 
    var selectDiv = document.querySelector("div.floating-ui-select-container > div.floating-ui-select"); 
    var selectObject = document.querySelector("div.ui-select-container > div.ui-select-match > span.ui-select-toggle"); 
    selectObject.addEventListener("focus", controller.hasFocus, true); 
    selectObject.addEventListener("blur", controller.lostFocus, true); 
} 

주 (controller.hasFocus 및 controller.lostFocus은 부울 토글) : 나는 때문에 두 번 쿼리 선택기를 사용 하나의 쿼리로 UI 선택 토글을 찾을 수 없습니다. 또한 두 번째 쿼리의 요소는 ui-select가 삽입하는 html에서 찾을 수 있습니다. 크로스 브라우저 호환성의 AngularJS와 들어

Answer 1

거품 단계 focusin 및 focusout 이벤트 핸들러에 ng-blur 및 ng-focus 매핑합니다.

function link(scope, element, attrs) { 
    var handleFocusIn = function() { 
     scope.$apply("vm.focus = true"); 
    }; 
    var handleFocusOut = function() { 
     scope.$apply("vm.focus = false"); 
    }; 
    element[0].addEventListener("focusin", handleFocusIn, true); 
    element[0].addEventListener("focusout", handleFocusOut, true); 
    scope.$on("$destroy", function() { 
     element[0].removeEventListener("focusin", handleFocusIn, true); 
     element[0].removeEventListener("focusout", handleFocusOut, true); 
    }; 
}; 

:

는 지시어 사용에 캡처 단계 focusin 및 focusout 이벤트 처리기를 추가하려면