Search code examples
javascripthtmlangularjsdomjqlite

Angularjs Element find both select and input in one call - is the limit a single tag lookup?

I have a directive in which I want to find <input/> and <select> elements to bind a blur event to them. I know I this could be done with ng-blur but this question is really about the angular.element selector.

link: function(scope, elem, attrs){

    elem.find( 'input, select' ).bind( 'blur', someFunction); // doesn't work as input, select returns length 0

    // this works when separated
    elem.find( 'input' ).bind( 'blur', someFunction);
    elem.find( 'select' ).bind( 'blur', someFunction);

}

I guess the question is why doesn't the first way work?

the documentation states:

find() - Limited to lookups by tag name from https://docs.angularjs.org/api/ng/function/angular.element

but doesn't say that it's limited to single tag lookups. Am I doing something wrong? Did I miss some documentation somewhere?

Solution

  • Obviously we don't have the jQuery API here, so I'm not surprised it's not working. The docs are lacking - also no surprise there either. However, if you look at the source, .find() is nothing more than a wrapper around getElementsByTagName. So - we don't buy ourselves much here. In other words, the compound selector isn't going to work...

    // jqLite.js#L998
find: function(element, selector) {
    if (element.getElementsByTagName) {
        return element.getElementsByTagName(selector);
    } else {
        return [];
    }
}