Wraps a raw DOM element or HTML string as a jQuery element.
If jQuery is available, angular.element
is an alias for the
jQuery function. If jQuery is not available, angular.element
delegates to Angular's built-in subset of jQuery, called "jQuery lite" or jqLite.
jqLite is a tiny, API-compatible subset of jQuery that allows Angular to manipulate the DOM in a cross-browser compatible way. jqLite implements only the most commonly needed functionality with the goal of having a very small footprint.
To use jQuery
, simply ensure it is loaded before the angular.js
file. You can also use the
ngJq
directive to specify that jqlite should be used over jQuery, or to use a
specific version of jQuery if multiple versions exist on the page.
angular.element(document).find(...)
or $document.find()
, or use the standard DOM APIs, e.g. document.querySelectorAll()
.jqLite provides only the following jQuery methods:
addClass()
after()
append()
attr()
- Does not support functions as parametersbind()
- Does not support namespaces, selectors or eventDatachildren()
- Does not support selectorsclone()
contents()
css()
- Only retrieves inline-styles, does not call getComputedStyle()
.
As a setter, does not convert numbers to strings or append 'px', and also does not have automatic property prefixing.data()
detach()
empty()
eq()
find()
- Limited to lookups by tag namehasClass()
html()
next()
- Does not support selectorson()
- Does not support namespaces, selectors or eventDataoff()
- Does not support namespaces, selectors or event object as parameterone()
- Does not support namespaces or selectorsparent()
- Does not support selectorsprepend()
prop()
ready()
remove()
removeAttr()
removeClass()
removeData()
replaceWith()
text()
toggleClass()
triggerHandler()
- Passes a dummy event object to handlers.unbind()
- Does not support namespaces or event object as parameterval()
wrap()
Angular also provides the following additional methods and events to both jQuery and jqLite:
$destroy
- AngularJS intercepts all jqLite/jQuery's DOM destruction apis and fires this event
on all DOM nodes being removed. This can be used to clean up any 3rd party bindings to the DOM
element before it is removed.controller(name)
- retrieves the controller of the current element or its parent. By default
retrieves controller associated with the ngController
directive. If name
is provided as
camelCase directive name, then the controller for this directive will be retrieved (e.g.
'ngModel'
).injector()
- retrieves the injector of the current element or its parent.scope()
- retrieves the scope of the current
element or its parent. Requires Debug Data to
be enabled.isolateScope()
- retrieves an isolate scope if one is attached directly to the
current element. This getter should be used only on elements that contain a directive which starts a new isolate
scope. Calling scope()
on this element always returns the original non-isolate scope.
Requires Debug Data to be enabled.inheritedData()
- same as data()
, but walks up the DOM until a value is found or the top
parent element is reached.You cannot spy on angular.element
if you are using Jasmine version 1.x. See
https://github.com/angular/angular.js/issues/14251 for more information.
angular.element(element);
Param | Type | Details |
---|---|---|
element | stringDOMElement |
HTML string or DOMElement to be wrapped into jQuery. |
Object | jQuery object. |