angular.element vs document.getElementById or jQuery selector with spin (busy) control
It can work like that:
var myElement = angular.element( document.querySelector( '#some-id' ) );
You wrap the Document.querySelector()
native Javascript call into the angular.element()
call. So you always get the element in a jqLite or jQuery object, depending whether or not jQuery
is available/loaded.
Official documentation for angular.element
:
If jQuery is available,
angular.element
is an alias for thejQuery
function. If jQuery is not available,angular.element
delegates to Angulars built-in subset ofjQuery
, that called "jQuery lite" or jqLite.All element references in
Angular
are always wrapped with jQuery orjqLite
(such as the element argument in a directives compile or link function). They are never rawDOM
references.
In case you do wonder why to use document.querySelector()
, please read this answer.
You should read the angular element docs if you haven't yet, so you can understand what is supported by jqLite and what not -jqlite is a subset of jquery built into angular.
Those selectors won't work with jqLite alone, since selectors by id are not supported.
var target = angular.element('#appBusyIndicator'); var target = angular.element('appBusyIndicator');
So, either :
- you use jqLite alone, more limited than jquery, but enough in most of the situations.
- or you include the full jQuery lib in your app, and use it like normal jquery, in the places that you really need jquery.
Edit: Note that jQuery should be loaded before angularJS in order to take precedence over jqLite:
Real jQuery always takes precedence over jqLite, provided it was loaded before DOMContentLoaded event fired.
Edit2: I missed the second part of the question before:
The issue with <input type="number">
, I think it is not an angular issue, it is the intended behaviour of the native html5 number element.
It won't return a non-numeric value even if you try to retrieve it with jquery's .val()
or with the raw .value
attribute.