"Fossies" - the Fresh Open Source Software Archive

Member "angular-1.8.2/docs/partials/api/ng/function/angular.element.html" (21 Oct 2020, 10167 Bytes) of package /linux/www/angular-1.8.2.zip:


As a special service "Fossies" has tried to format the requested source page into HTML format using (guessed) HTML source code syntax highlighting (style: standard) with prefixed line numbers. Alternatively you can here view or download the uninterpreted source code file.

    1 <a href='https://github.com/angular/angular.js/edit/v1.8.x/src/jqLite.js?message=docs(angular.element)%3A%20describe%20your%20change...#L24' class='improve-docs btn btn-primary'><i class="glyphicon glyphicon-edit">&nbsp;</i>Improve this Doc</a>
    2 
    3 
    4 
    5 <a href='https://github.com/angular/angular.js/tree/v1.8.2/src/jqLite.js#L24' class='view-source pull-right btn btn-primary'>
    6   <i class="glyphicon glyphicon-zoom-in">&nbsp;</i>View Source
    7 </a>
    8 
    9 
   10 <header class="api-profile-header">
   11   <h1 class="api-profile-header-heading">angular.element</h1>
   12   <ol class="api-profile-header-structure naked-list step-list">
   13     
   14     <li>
   15       - function in module <a href="api/ng">ng</a>
   16     </li>
   17   </ol>
   18 </header>
   19 
   20 
   21 
   22 
   23 
   24 <div class="api-profile-description">
   25   <h2 id="overview">Overview</h2>
   26   <p>Wraps a raw DOM element or HTML string as a <a href="http://jquery.com">jQuery</a> element.</p>
   27 <p>If jQuery is available, <code>angular.element</code> is an alias for the
   28 <a href="http://api.jquery.com/jQuery/">jQuery</a> function. If jQuery is not available, <code>angular.element</code>
   29 delegates to AngularJS&#39;s built-in subset of jQuery, called &quot;jQuery lite&quot; or <strong>jqLite</strong>.</p>
   30 <p>jqLite is a tiny, API-compatible subset of jQuery that allows
   31 AngularJS to manipulate the DOM in a cross-browser compatible way. jqLite implements only the most
   32 commonly needed functionality with the goal of having a very small footprint.</p>
   33 <p>To use <code>jQuery</code>, simply ensure it is loaded before the <code>angular.js</code> file. You can also use the
   34 <a href="api/ng/directive/ngJq"><code>ngJq</code></a> directive to specify that jqlite should be used over jQuery, or to use a
   35 specific version of jQuery if multiple versions exist on the page.</p>
   36 <div class="alert alert-info"><strong>Note:</strong> All element references in AngularJS are always wrapped with jQuery or
   37 jqLite (such as the element argument in a directive&#39;s compile / link function). They are never raw DOM references.</div>
   38 
   39 <div class="alert alert-warning"><strong>Note:</strong> Keep in mind that this function will not find elements
   40 by tag name / CSS selector. For lookups by tag name, try instead <code>angular.element(document).find(...)</code>
   41 or <code>$document.find()</code>, or use the standard DOM APIs, e.g. <code>document.querySelectorAll()</code>.</div>
   42 
   43 <h2 id="angularjs-s-jqlite">AngularJS&#39;s jqLite</h2>
   44 <p>jqLite provides only the following jQuery methods:</p>
   45 <ul>
   46 <li><a href="http://api.jquery.com/addClass/"><code>addClass()</code></a> - Does not support a function as first argument</li>
   47 <li><a href="http://api.jquery.com/after/"><code>after()</code></a></li>
   48 <li><a href="http://api.jquery.com/append/"><code>append()</code></a> - Contrary to jQuery, this doesn&#39;t clone elements
   49 so will not work correctly when invoked on a jqLite object containing more than one DOM node</li>
   50 <li><a href="http://api.jquery.com/attr/"><code>attr()</code></a> - Does not support functions as parameters</li>
   51 <li><a href="http://api.jquery.com/bind/"><code>bind()</code></a> (<em>deprecated</em>, use <a href="http://api.jquery.com/on/"><code>on()</code></a>) - Does not support namespaces, selectors or eventData</li>
   52 <li><a href="http://api.jquery.com/children/"><code>children()</code></a> - Does not support selectors</li>
   53 <li><a href="http://api.jquery.com/clone/"><code>clone()</code></a></li>
   54 <li><a href="http://api.jquery.com/contents/"><code>contents()</code></a></li>
   55 <li><a href="http://api.jquery.com/css/"><code>css()</code></a> - Only retrieves inline-styles, does not call <code>getComputedStyle()</code>.
   56 As a setter, does not convert numbers to strings or append &#39;px&#39;, and also does not have automatic property prefixing.</li>
   57 <li><a href="http://api.jquery.com/data/"><code>data()</code></a></li>
   58 <li><a href="http://api.jquery.com/detach/"><code>detach()</code></a></li>
   59 <li><a href="http://api.jquery.com/empty/"><code>empty()</code></a></li>
   60 <li><a href="http://api.jquery.com/eq/"><code>eq()</code></a></li>
   61 <li><a href="http://api.jquery.com/find/"><code>find()</code></a> - Limited to lookups by tag name</li>
   62 <li><a href="http://api.jquery.com/hasClass/"><code>hasClass()</code></a></li>
   63 <li><a href="http://api.jquery.com/html/"><code>html()</code></a></li>
   64 <li><a href="http://api.jquery.com/next/"><code>next()</code></a> - Does not support selectors</li>
   65 <li><a href="http://api.jquery.com/on/"><code>on()</code></a> - Does not support namespaces, selectors or eventData</li>
   66 <li><a href="http://api.jquery.com/off/"><code>off()</code></a> - Does not support namespaces, selectors or event object as parameter</li>
   67 <li><a href="http://api.jquery.com/one/"><code>one()</code></a> - Does not support namespaces or selectors</li>
   68 <li><a href="http://api.jquery.com/parent/"><code>parent()</code></a> - Does not support selectors</li>
   69 <li><a href="http://api.jquery.com/prepend/"><code>prepend()</code></a></li>
   70 <li><a href="http://api.jquery.com/prop/"><code>prop()</code></a></li>
   71 <li><a href="http://api.jquery.com/ready/"><code>ready()</code></a> (<em>deprecated</em>, use <code>angular.element(callback)</code> instead of <code>angular.element(document).ready(callback)</code>)</li>
   72 <li><a href="http://api.jquery.com/remove/"><code>remove()</code></a></li>
   73 <li><a href="http://api.jquery.com/removeAttr/"><code>removeAttr()</code></a> - Does not support multiple attributes</li>
   74 <li><a href="http://api.jquery.com/removeClass/"><code>removeClass()</code></a> - Does not support a function as first argument</li>
   75 <li><a href="http://api.jquery.com/removeData/"><code>removeData()</code></a></li>
   76 <li><a href="http://api.jquery.com/replaceWith/"><code>replaceWith()</code></a></li>
   77 <li><a href="http://api.jquery.com/text/"><code>text()</code></a></li>
   78 <li><a href="http://api.jquery.com/toggleClass/"><code>toggleClass()</code></a> - Does not support a function as first argument</li>
   79 <li><a href="http://api.jquery.com/triggerHandler/"><code>triggerHandler()</code></a> - Passes a dummy event object to handlers</li>
   80 <li><a href="http://api.jquery.com/unbind/"><code>unbind()</code></a> (<em>deprecated</em>, use <a href="http://api.jquery.com/off/"><code>off()</code></a>) - Does not support namespaces or event object as parameter</li>
   81 <li><a href="http://api.jquery.com/val/"><code>val()</code></a></li>
   82 <li><a href="http://api.jquery.com/wrap/"><code>wrap()</code></a></li>
   83 </ul>
   84 <p>jqLite also provides a method restoring pre-1.8 insecure treatment of XHTML-like tags.
   85 This legacy behavior turns input like <code>&lt;div /&gt;&lt;span /&gt;</code> to <code>&lt;div&gt;&lt;/div&gt;&lt;span&gt;&lt;/span&gt;</code>
   86 instead of <code>&lt;div&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;</code> like version 1.8 &amp; newer do. To restore it, invoke:</p>
   87 <pre><code class="lang-js">angular.UNSAFE_restoreLegacyJqLiteXHTMLReplacement();
   88 </code></pre>
   89 <p>Note that this only patches jqLite. If you use jQuery 3.5.0 or newer, please read the
   90 <a href="https://jquery.com/upgrade-guide/3.5/">jQuery 3.5 upgrade guide</a> for more details
   91 about the workarounds.</p>
   92 <h2 id="jquery-jqlite-extras">jQuery/jqLite Extras</h2>
   93 <p>AngularJS also provides the following additional methods and events to both jQuery and jqLite:</p>
   94 <h3 id="events">Events</h3>
   95 <ul>
   96 <li><code>$destroy</code> - AngularJS intercepts all jqLite/jQuery&#39;s DOM destruction apis and fires this event
   97  on all DOM nodes being removed.  This can be used to clean up any 3rd party bindings to the DOM
   98  element before it is removed.</li>
   99 </ul>
  100 <h3 id="methods">Methods</h3>
  101 <ul>
  102 <li><code>controller(name)</code> - retrieves the controller of the current element or its parent. By default
  103 retrieves controller associated with the <code>ngController</code> directive. If <code>name</code> is provided as
  104 camelCase directive name, then the controller for this directive will be retrieved (e.g.
  105 <code>&#39;ngModel&#39;</code>).</li>
  106 <li><code>injector()</code> - retrieves the injector of the current element or its parent.</li>
  107 <li><code>scope()</code> - retrieves the <a href="api/ng/type/$rootScope.Scope">scope</a> of the current
  108 element or its parent. Requires <a href="guide/production#disabling-debug-data">Debug Data</a> to
  109 be enabled.</li>
  110 <li><code>isolateScope()</code> - retrieves an isolate <a href="api/ng/type/$rootScope.Scope">scope</a> if one is attached directly to the
  111 current element. This getter should be used only on elements that contain a directive which starts a new isolate
  112 scope. Calling <code>scope()</code> on this element always returns the original non-isolate scope.
  113 Requires <a href="guide/production#disabling-debug-data">Debug Data</a> to be enabled.</li>
  114 <li><code>inheritedData()</code> - same as <code>data()</code>, but walks up the DOM until a value is found or the top
  115 parent element is reached.</li>
  116 </ul>
  117 
  118 </div>
  119 
  120 
  121 
  122 <h2 id="known-issues">Known Issues</h2>
  123 <div class="known-issue">
  124   <p>You cannot spy on <code>angular.element</code> if you are using Jasmine version 1.x. See
  125 <a href="https://github.com/angular/angular.js/issues/14251">https://github.com/angular/angular.js/issues/14251</a> for more information.</p>
  126 
  127 </div>
  128 
  129 
  130 <div>
  131   
  132 
  133   
  134 
  135   <h2 id="usage">Usage</h2>
  136     
  137       <p><code>angular.element(element);</code></p>
  138 
  139 
  140     
  141 
  142     
  143 <section class="api-section">
  144   <h3 id="angular.element-arguments">Arguments</h3>
  145 
  146 <table class="variables-matrix input-arguments">
  147   <thead>
  148     <tr>
  149       <th>Param</th>
  150       <th>Type</th>
  151       <th>Details</th>
  152     </tr>
  153   </thead>
  154   <tbody>
  155     
  156     <tr>
  157       <td>
  158         element
  159         
  160         
  161       </td>
  162       <td>
  163         <a href="" class="label type-hint type-hint-string">string</a><a href="" class="label type-hint type-hint-domelement">DOMElement</a>
  164       </td>
  165       <td>
  166         <p>HTML string or DOMElement to be wrapped into jQuery.</p>
  167 
  168         
  169       </td>
  170     </tr>
  171     
  172   </tbody>
  173 </table>
  174 
  175 </section>
  176     
  177 
  178     <h3 id="angular.element-returns">Returns</h3>
  179 <table class="variables-matrix return-arguments">
  180   <tr>
  181     <td><a href="" class="label type-hint type-hint-object">Object</a></td>
  182     <td><p>jQuery object.</p>
  183 </td>
  184   </tr>
  185 </table>
  186 
  187   
  188   
  189   
  190 
  191 
  192 
  193   
  194 </div>
  195 
  196