Добавление прослушивателя событий в пользовательский интерфейс в пользовательской директиве

У меня есть пользовательская директива, в которой используется ui-select. Я пытаюсь применить класс css к своей директиве, когда пользовательский интерфейс внутри него получает фокус и удаляет его при размытии. ui-select не имеет прослушивателей событий focus или blur, поэтому я хотел бы добавить свои собственные. Я добавляю прослушиватели событий в функцию ссылки моей директивы, но когда я открываю свое приложение в 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 с помощью одного запроса. Кроме того, элементы во втором запросе находятся в HTML-коде, который вставляет ui-select.


javascript html angularjs angularjs-directive ui-select
person user52016    schedule 10.08.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Для кросс-браузерной совместимости 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);
    };
};
person georgeawg    schedule 10.08.2016