Adding an event listener to ui-select within a custom directive

Question

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!

My directive's 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)

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.

georgeawg · Accepted Answer · 2016-08-10 19:45:42Z

1

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

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

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

answered Aug 10, 2016 at 19:45

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding an event listener to ui-select within a custom directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related