79 lines
5.8 KiB
HTML
Executable file
79 lines
5.8 KiB
HTML
Executable file
<a href="http://github.com/angular/angular.js/tree/v1.2.0rc1/src/jqLite.js#L7" class="view-source btn btn-action"><i class="icon-zoom-in"> </i> View source</a><a href="http://github.com/angular/angular.js/edit/master/src/jqLite.js" class="improve-docs btn btn-primary"><i class="icon-edit"> </i> Improve this doc</a><h1><code ng:non-bindable="">angular.element</code>
|
|
<div><span class="hint">API in module <code ng:non-bindable="">ng</code>
|
|
</span>
|
|
</div>
|
|
</h1>
|
|
<div><h2 id="Description">Description</h2>
|
|
<div class="description"><div class="angular-element-page"><p>Wraps a raw DOM element or HTML string as a <a href="http://jquery.com">jQuery</a> element.
|
|
<code>angular.element</code> can be either an alias for <a href="http://api.jquery.com/jQuery/">jQuery</a> function, if
|
|
jQuery is available, or a function that wraps the element or string in Angular's jQuery lite
|
|
implementation (commonly referred to as jqLite).</p>
|
|
<p>Real jQuery always takes precedence over jqLite, provided it was loaded before <code>DOMContentLoaded</code>
|
|
event fired.</p>
|
|
<p>jqLite is a tiny, API-compatible subset of jQuery that allows
|
|
Angular to manipulate the DOM. jqLite implements only the most commonly needed functionality
|
|
within a very small footprint, so only a subset of the jQuery API - methods, arguments and
|
|
invocation styles - are supported.</p>
|
|
<p>Note: All element references in Angular are always wrapped with jQuery or jqLite; they are never
|
|
raw DOM references.</p>
|
|
<h4>Angular's jqLite</h2>
|
|
<p>Angular's lite version of jQuery provides only the following jQuery methods:</p>
|
|
<ul>
|
|
<li><a href="http://api.jquery.com/addClass/">addClass()</a></li>
|
|
<li><a href="http://api.jquery.com/after/">after()</a></li>
|
|
<li><a href="http://api.jquery.com/append/">append()</a></li>
|
|
<li><a href="http://api.jquery.com/attr/">attr()</a></li>
|
|
<li><a href="http://api.jquery.com/on/">bind()</a> - Does not support namespaces, selectors or eventData</li>
|
|
<li><a href="http://api.jquery.com/children/">children()</a> - Does not support selectors</li>
|
|
<li><a href="http://api.jquery.com/clone/">clone()</a></li>
|
|
<li><a href="http://api.jquery.com/contents/">contents()</a></li>
|
|
<li><a href="http://api.jquery.com/css/">css()</a></li>
|
|
<li><a href="http://api.jquery.com/data/">data()</a></li>
|
|
<li><a href="http://api.jquery.com/eq/">eq()</a></li>
|
|
<li><a href="http://api.jquery.com/find/">find()</a> - Limited to lookups by tag name</li>
|
|
<li><a href="http://api.jquery.com/hasClass/">hasClass()</a></li>
|
|
<li><a href="http://api.jquery.com/html/">html()</a></li>
|
|
<li><a href="http://api.jquery.com/next/">next()</a> - Does not support selectors</li>
|
|
<li><a href="http://api.jquery.com/on/">on()</a> - Does not support namespaces, selectors or eventData</li>
|
|
<li><a href="http://api.jquery.com/off/">off()</a> - Does not support namespaces or selectors</li>
|
|
<li><a href="http://api.jquery.com/parent/">parent()</a> - Does not support selectors</li>
|
|
<li><a href="http://api.jquery.com/prepend/">prepend()</a></li>
|
|
<li><a href="http://api.jquery.com/prop/">prop()</a></li>
|
|
<li><a href="http://api.jquery.com/ready/">ready()</a></li>
|
|
<li><a href="http://api.jquery.com/remove/">remove()</a></li>
|
|
<li><a href="http://api.jquery.com/removeAttr/">removeAttr()</a></li>
|
|
<li><a href="http://api.jquery.com/removeClass/">removeClass()</a></li>
|
|
<li><a href="http://api.jquery.com/removeData/">removeData()</a></li>
|
|
<li><a href="http://api.jquery.com/replaceWith/">replaceWith()</a></li>
|
|
<li><a href="http://api.jquery.com/text/">text()</a></li>
|
|
<li><a href="http://api.jquery.com/toggleClass/">toggleClass()</a></li>
|
|
<li><a href="http://api.jquery.com/triggerHandler/">triggerHandler()</a> - Passes a dummy event object to handlers.</li>
|
|
<li><a href="http://api.jquery.com/off/">unbind()</a> - Does not support namespaces</li>
|
|
<li><a href="http://api.jquery.com/val/">val()</a></li>
|
|
<li><a href="http://api.jquery.com/wrap/">wrap()</a></li>
|
|
</ul>
|
|
<h2>jQuery/jqLite Extras</h4>
|
|
<p>Angular also provides the following additional methods and events to both jQuery and jqLite:</p>
|
|
<h5>Events</h3>
|
|
<ul>
|
|
<li><code>$destroy</code> - 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 and 3rd party bindings to the DOM
|
|
element before it is removed.<h3>Methods</h5>
|
|
</li>
|
|
<li><code>controller(name)</code> - retrieves the controller of the current element or its parent. By default
|
|
retrieves controller associated with the <code>ngController</code> directive. If <code>name</code> is provided as
|
|
camelCase directive name, then the controller for this directive will be retrieved (e.g.
|
|
<code>'ngModel'</code>).</li>
|
|
<li><code>injector()</code> - retrieves the injector of the current element or its parent.</li>
|
|
<li><code>scope()</code> - retrieves the <a href="api/ng.$rootScope.Scope"><code>scope</code></a> of the current
|
|
element or its parent.</li>
|
|
<li><code>inheritedData()</code> - same as <code>data()</code>, but walks up the DOM until a value is found or the top
|
|
parent element is reached.</li>
|
|
</ul>
|
|
</div></div>
|
|
<h2 id="Usage">Usage</h2>
|
|
<div class="usage"><pre class="prettyprint linenums">angular.element(element);</pre>
|
|
<h4 id="parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>element</td><td><a href="" class="label type-hint type-hint-string">string</a><a href="" class="label type-hint type-hint-domelement">DOMElement</a></td><td><div class="angular-element-page"><p>HTML string or DOMElement to be wrapped into jQuery.</p>
|
|
</div></td></tr></tbody></table><h4 id="returns">Returns</h4><table class="variables-matrix"><tr><td><a href="" class="label type-hint type-hint-object">Object</a></td><td><div class="angular-element-page"><p>jQuery object.</p>
|
|
</div></td></tr></table></div>
|
|
</div>
|