Angular jqLite .find() will not return any inputs?

Question

EDIT: So it seems to be an issue with selectors? Does jqLite not support selectors or some reduced version of them?

find('input') and find('button') will return results but if I try to filter it with a ":first" or something then it returns no results.

I can't seem to get jqLite's find() to return any child inputs of my div.

I have a $watch on a boolean function that my ng-show uses. So when this div becomes visible I want to apply focus on the div element and then find the first input descendant and focus on that.

example div element that the directive watches:

<div myDirective="function()">
    text and stuff
    <button>
    <another button>
</div>

<div myDirective="function()">
    <input>
</div>

this is my helper function in my directive:

function highlightAndFocus(node) {
      // focus the div
      node.focus();
      // get angular's jqlite wrapped element
      var task = angular.element(node);
      task.addClass('highlight');

      // these return empty statements
      console.log(task.find('input:first'));
      console.log(task.find('button:visible:not("#cancel"):first'));
}

The angular documentation says it finds only by tag name but isn't that what "input" and "button" are?

https://docs.angularjs.org/api/ng/function/angular.element

What's going on here? It seems silly to include jquery just for this one usecase when it seems like it should be supported. I'm printing the var task and I can see the input child elements in the web console.

Etheryte · Accepted Answer · 2016-12-23T20:03:51.607

0

JQlite is not the same thing as jQuery. If jQuery is available on the page, Angular will use it, but if it isn't, jQlite is used instead.
The docs clearly say that jQlite's .find() only supports lookup by tag names, it doesn't to work with additional selectors (like :first).

You can use the standard DOM APIs instead, namely Element.querySelectorAll(), if you really need it.

edited Dec 23 '16 at 20:03

answered Dec 23 '16 at 20:01

Etheryte

24,589
11
71
116

I guess I assumed selectors were a base feature. So I have two buttons in these divs, a yes and a no. If I search for "button" then I'll get two results, is the only way to focus on the "yes" button to add id="yes" to those buttons and then search on find('button yes')? – Milan Novaković Dec 23 '16 at 20:03
@MilanNovaković When Angular was first conceived, jQuery was still _very_ prevalent in the web development community. Angular didn't look to replicate jQuery's functionality, but offer an alternative approach to development structure altogether. See [this question](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) for a more broad explanation. – Etheryte Dec 23 '16 at 20:05
So how can I find my input when there's multiple results? Also something is funky about all this. I've had another directive where find with selectors seems to be working. In particular I'm using :visible:not("#cancel") and it only grabs the continue button that I wanted, when there are a dozen defined but are just hidden with ng-show. – Milan Novaković Dec 23 '16 at 20:18

Angular jqLite .find() will not return any inputs?

1 Answers1