knowhow-server
Version:
A personal workflow engine that can manage and use any network connected host
87 lines (84 loc) • 7.07 kB
HTML
<a href="http://github.com/angular/angular.js/tree/v1.2.9/src/jqLite.js#L15" 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.</p>
<p>If jQuery is available, <code>angular.element</code> is an alias for the
<a href="http://api.jquery.com/jQuery/">jQuery</a> function. If jQuery is not available, <code>angular.element</code>
delegates to Angular's built-in subset of jQuery, called "jQuery lite" or "jqLite."</p>
<div class="alert alert-success">jqLite is a tiny, API-compatible subset of jQuery that allows
Angular to manipulate the DOM in a cross-browser compatible way. <strong>jqLite</strong> implements only the most
commonly needed functionality with the goal of having a very small footprint.</div>
<p>To use jQuery, simply load it before <code>DOMContentLoaded</code> event fired.</p>
<div class="alert"><strong>Note:</strong> all element references in Angular are always wrapped with jQuery or
jqLite; they are never raw DOM references.</div>
<h4 id="description_angulars-jqlite">Angular's jqLite</h4>
<p>jqLite provides only the following jQuery methods:</p>
<ul>
<li><a href="http://api.jquery.com/addClass/"><code>addClass()</code></a></li>
<li><a href="http://api.jquery.com/after/"><code>after()</code></a></li>
<li><a href="http://api.jquery.com/append/"><code>append()</code></a></li>
<li><a href="http://api.jquery.com/attr/"><code>attr()</code></a></li>
<li><a href="http://api.jquery.com/on/"><code>bind()</code></a> - Does not support namespaces, selectors or eventData</li>
<li><a href="http://api.jquery.com/children/"><code>children()</code></a> - Does not support selectors</li>
<li><a href="http://api.jquery.com/clone/"><code>clone()</code></a></li>
<li><a href="http://api.jquery.com/contents/"><code>contents()</code></a></li>
<li><a href="http://api.jquery.com/css/"><code>css()</code></a></li>
<li><a href="http://api.jquery.com/data/"><code>data()</code></a></li>
<li><a href="http://api.jquery.com/empty/"><code>empty()</code></a></li>
<li><a href="http://api.jquery.com/eq/"><code>eq()</code></a></li>
<li><a href="http://api.jquery.com/find/"><code>find()</code></a> - Limited to lookups by tag name</li>
<li><a href="http://api.jquery.com/hasClass/"><code>hasClass()</code></a></li>
<li><a href="http://api.jquery.com/html/"><code>html()</code></a></li>
<li><a href="http://api.jquery.com/next/"><code>next()</code></a> - Does not support selectors</li>
<li><a href="http://api.jquery.com/on/"><code>on()</code></a> - Does not support namespaces, selectors or eventData</li>
<li><a href="http://api.jquery.com/off/"><code>off()</code></a> - Does not support namespaces or selectors</li>
<li><a href="http://api.jquery.com/one/"><code>one()</code></a> - Does not support namespaces or selectors</li>
<li><a href="http://api.jquery.com/parent/"><code>parent()</code></a> - Does not support selectors</li>
<li><a href="http://api.jquery.com/prepend/"><code>prepend()</code></a></li>
<li><a href="http://api.jquery.com/prop/"><code>prop()</code></a></li>
<li><a href="http://api.jquery.com/ready/"><code>ready()</code></a></li>
<li><a href="http://api.jquery.com/remove/"><code>remove()</code></a></li>
<li><a href="http://api.jquery.com/removeAttr/"><code>removeAttr()</code></a></li>
<li><a href="http://api.jquery.com/removeClass/"><code>removeClass()</code></a></li>
<li><a href="http://api.jquery.com/removeData/"><code>removeData()</code></a></li>
<li><a href="http://api.jquery.com/replaceWith/"><code>replaceWith()</code></a></li>
<li><a href="http://api.jquery.com/text/"><code>text()</code></a></li>
<li><a href="http://api.jquery.com/toggleClass/"><code>toggleClass()</code></a></li>
<li><a href="http://api.jquery.com/triggerHandler/"><code>triggerHandler()</code></a> - Passes a dummy event object to handlers.</li>
<li><a href="http://api.jquery.com/off/"><code>unbind()</code></a> - Does not support namespaces</li>
<li><a href="http://api.jquery.com/val/"><code>val()</code></a></li>
<li><a href="http://api.jquery.com/wrap/"><code>wrap()</code></a></li>
</ul>
<h4 id="description_jquery/jqlite-extras">jQuery/jqLite Extras</h4>
<p>Angular also provides the following additional methods and events to both jQuery and jqLite:</p>
<h5 id="description_jquery/jqlite-extras_events">Events</h5>
<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 any 3rd party bindings to the DOM
element before it is removed.</li>
</ul>
<h5 id="description_jquery/jqlite-extras_methods">Methods</h5>
<ul>
<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>isolateScope()</code> - retrieves an isolate <a href="api/ng.$rootScope.Scope"><code>scope</code></a> 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 <code>scope()</code> on this element always returns the original non-isolate scope.</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="usage_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="usage_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>