2

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?

scniro
  • 16,844
  • 8
  • 62
  • 106
SoluableNonagon
  • 11,541
  • 11
  • 53
  • 98

2 Answers2

2

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 [];
    }
}
scniro
  • 16,844
  • 8
  • 62
  • 106
0

You could also use querySelectorAll.

element[0].querySelectorAll('input, select')

Here is a jsfiddle:

http://jsfiddle.net/36qp9ekL/1196/

kabaehr
  • 1,040
  • 11
  • 18