angular.element

Overview

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 AngularJS's built-in subset of jQuery, called "jQuery lite" or jqLite.

jqLite is a tiny, API-compatible subset of jQuery that allows AngularJS 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.

AngularJS's jqLite

jqLite provides only the following jQuery methods:

• addClass() - Does not support a function as first argument
• after()
• append() - Contrary to jQuery, this doesn't clone elements so will not work correctly when invoked on a jqLite object containing more than one DOM node
• attr() - Does not support functions as parameters
• bind() (deprecated, use on()) - Does not support namespaces, selectors or eventData
• children() - Does not support selectors
• clone()
• 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 name
• hasClass()
• html()
• next() - Does not support selectors
• on() - Does not support namespaces, selectors or eventData
• off() - Does not support namespaces, selectors or event object as parameter
• one() - Does not support namespaces or selectors
• parent() - Does not support selectors
• prepend()
• prop()
• ready() (deprecated, use angular.element(callback) instead of angular.element(document).ready(callback))
• remove()
• removeAttr() - Does not support multiple attributes
• removeClass() - Does not support a function as first argument
• removeData()
• replaceWith()
• text()
• toggleClass() - Does not support a function as first argument
• triggerHandler() - Passes a dummy event object to handlers
• unbind() (deprecated, use off()) - Does not support namespaces or event object as parameter
• val()
• wrap()

jqLite also provides a method restoring pre-1.8 insecure treatment of XHTML-like tags. This legacy behavior turns input like <div /><span /> to <div></div><span></span> instead of <div><span></span></div> like version 1.8 & newer do. To restore it, invoke:

angular.UNSAFE_restoreLegacyJqLiteXHTMLReplacement();

Note that this only patches jqLite. If you use jQuery 3.5.0 or newer, please read the jQuery 3.5 upgrade guide for more details about the workarounds.

jQuery/jqLite Extras

AngularJS also provides the following additional methods and events to both jQuery and jqLite:

Events

• $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.

Methods

• 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.