Podcast/lib/angular/docs/partials/api/angular.element.html
2013-08-21 19:46:51 +02:00

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&#39;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&#39;s jqLite</h2>
<p>Angular&#39;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&#39;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>&#39;ngModel&#39;</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>