在自定义指令中向ui-select添加事件侦听器

I have a custom directive that utilizes ui-select. I am trying to apply a css class to my directive when the ui-select inside of it gets focus and remove it on blur. ui-select does not have focus or blur event listeners, so I would like to add my own. I add the event listeners in the link function of my directive, but when I open my app in Chrome and use the developer tools to see the event listeners on this element, mine are not there. I have tried to research this issue, but I haven't been able to find anything similar. Any help would be much appreciated!

我有一个使用ui-select的自定义指令。我正在尝试将css类应用于我的指令,当它的ui-select内部获得焦点并在模糊时将其删除。 ui-select没有焦点或模糊事件监听器,所以我想添加自己的。我在我的指令的链接功能中添加了事件监听器,但是当我在Chrome中打开我的应用程序并使用开发人员工具查看此元素上的事件监听器时,我的不在那里。我试图研究这个问题,但我找不到类似的东西。任何帮助将非常感激!

My directive's html:

我的指令是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>

My directive's link function: (controller.hasFocus and controller.lostFocus just toggle a boolean)

我的指令的链接功能:(controller.hasFocus和controller.lostFocus只是切换一个布尔值)

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);
}

Note: I use the query selector twice because I could never get it to find the ui-select-toggle with one query. Also, the elements in the second query are found in the html that ui-select inserts.

注意:我使用了两次查询选择器,因为我无法通过一个查询找到ui-select-toggle。此外,第二个查询中的元素可以在ui-select插入的html中找到。

1 个解决方案

#1

For cross-browser compatability AngularJS maps ng-blur and ng-focus to bubble phase focusin and focusout event handlers.

对于跨浏览器兼容性,AngularJS将ng-blur和ng-focus映射到bubble bubble focusin和focusout事件处理程序。

To add capture phase focusin and focusout event handlers to a directive use:

要将捕获阶段focusin和focusout事件处理程序添加到指令使用:

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);
    };
};

#1