Question

我有一个使用ui-select的自定义指令。我正在尝试将css类应用于我的指令，当它的ui-select内部获得焦点并在模糊时将其删除。 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>

我的指令的链接功能：（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);
}

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

Answer 1

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

要将捕获阶段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);
    };
};

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

1 个答案: