EVOLUTION-MANAGER
Edit File: directive.html
<h1>Directive components in <code>ng</code></h1> <div class="component-breakdown"> <div> <table class="definition-table"> <tr> <th>Name</th> <th>Description</th> </tr> <tr> <td><a href="api/ng/directive/ngApp">ngApp</a></td> <td><p>Use this directive to <strong>auto-bootstrap</strong> an AngularJS application. The <code>ngApp</code> directive designates the <strong>root element</strong> of the application and is typically placed near the root element of the page - e.g. on the <code><body></code> or <code><html></code> tags.</p> </td> </tr> <tr> <td><a href="api/ng/directive/a">a</a></td> <td><p>Modifies the default behavior of the html A tag so that the default action is prevented when the href attribute is empty.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngHref">ngHref</a></td> <td><p>Using Angular markup like <code>{{hash}}</code> in an href attribute will make the link go to the wrong URL if the user clicks it before Angular has a chance to replace the <code>{{hash}}</code> markup with its value. Until Angular replaces the markup the link will be broken and will most likely return a 404 error. The <code>ngHref</code> directive solves this problem.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngSrc">ngSrc</a></td> <td><p>Using Angular markup like <code>{{hash}}</code> in a <code>src</code> attribute doesn't work right: The browser will fetch from the URL with the literal text <code>{{hash}}</code> until Angular replaces the expression inside <code>{{hash}}</code>. The <code>ngSrc</code> directive solves this problem.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngSrcset">ngSrcset</a></td> <td><p>Using Angular markup like <code>{{hash}}</code> in a <code>srcset</code> attribute doesn't work right: The browser will fetch from the URL with the literal text <code>{{hash}}</code> until Angular replaces the expression inside <code>{{hash}}</code>. The <code>ngSrcset</code> directive solves this problem.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngDisabled">ngDisabled</a></td> <td><p>We shouldn't do this, because it will make the button enabled on Chrome/Firefox but not on IE8 and older IEs:</p> <pre><code class="lang-html"><div ng-init="scope = { isDisabled: false }"> <button disabled="{{scope.isDisabled}}">Disabled</button> </div> </code></pre> </td> </tr> <tr> <td><a href="api/ng/directive/ngChecked">ngChecked</a></td> <td><p>The HTML specification does not require browsers to preserve the values of boolean attributes such as checked. (Their presence means true and their absence means false.) If we put an Angular interpolation expression into such an attribute then the binding information would be lost when the browser removes the attribute. The <code>ngChecked</code> directive solves this problem for the <code>checked</code> attribute. This complementary directive is not removed by the browser and so provides a permanent reliable place to store the binding information.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngReadonly">ngReadonly</a></td> <td><p>The HTML specification does not require browsers to preserve the values of boolean attributes such as readonly. (Their presence means true and their absence means false.) If we put an Angular interpolation expression into such an attribute then the binding information would be lost when the browser removes the attribute. The <code>ngReadonly</code> directive solves this problem for the <code>readonly</code> attribute. This complementary directive is not removed by the browser and so provides a permanent reliable place to store the binding information.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngSelected">ngSelected</a></td> <td><p>The HTML specification does not require browsers to preserve the values of boolean attributes such as selected. (Their presence means true and their absence means false.) If we put an Angular interpolation expression into such an attribute then the binding information would be lost when the browser removes the attribute. The <code>ngSelected</code> directive solves this problem for the <code>selected</code> attribute. This complementary directive is not removed by the browser and so provides a permanent reliable place to store the binding information.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngOpen">ngOpen</a></td> <td><p>The HTML specification does not require browsers to preserve the values of boolean attributes such as open. (Their presence means true and their absence means false.) If we put an Angular interpolation expression into such an attribute then the binding information would be lost when the browser removes the attribute. The <code>ngOpen</code> directive solves this problem for the <code>open</code> attribute. This complementary directive is not removed by the browser and so provides a permanent reliable place to store the binding information.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngForm">ngForm</a></td> <td><p>Nestable alias of <a href="api/ng/directive/form"><code>form</code></a> directive. HTML does not allow nesting of form elements. It is useful to nest forms, for example if the validity of a sub-group of controls needs to be determined.</p> </td> </tr> <tr> <td><a href="api/ng/directive/form">form</a></td> <td><p>Directive that instantiates <a href="api/ng/type/form.FormController">FormController</a>.</p> </td> </tr> <tr> <td><a href="api/ng/directive/textarea">textarea</a></td> <td><p>HTML textarea element control with angular data-binding. The data-binding and validation properties of this element are exactly the same as those of the <a href="api/ng/directive/input">input element</a>.</p> </td> </tr> <tr> <td><a href="api/ng/directive/input">input</a></td> <td><p>HTML input element control. When used together with <a href="api/ng/directive/ngModel"><code>ngModel</code></a>, it provides data-binding, input state control, and validation. Input control follows HTML5 input types and polyfills the HTML5 validation behavior for older browsers.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngValue">ngValue</a></td> <td><p>Binds the given expression to the value of <code><option></code> or <a href="api/ng/input/input[radio]"><code>input[radio]</code></a>, so that when the element is selected, the <a href="api/ng/directive/ngModel"><code>ngModel</code></a> of that element is set to the bound value.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngBind">ngBind</a></td> <td><p>The <code>ngBind</code> attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngBindTemplate">ngBindTemplate</a></td> <td><p>The <code>ngBindTemplate</code> directive specifies that the element text content should be replaced with the interpolation of the template in the <code>ngBindTemplate</code> attribute. Unlike <code>ngBind</code>, the <code>ngBindTemplate</code> can contain multiple <code>{{</code> <code>}}</code> expressions. This directive is needed since some HTML elements (such as TITLE and OPTION) cannot contain SPAN elements.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngBindHtml">ngBindHtml</a></td> <td><p>Evaluates the expression and inserts the resulting HTML into the element in a secure way. By default, the resulting HTML content will be sanitized using the <a href="api/ngSanitize/service/$sanitize">$sanitize</a> service. To utilize this functionality, ensure that <code>$sanitize</code> is available, for example, by including <a href="api/ngSanitize"><code>ngSanitize</code></a> in your module's dependencies (not in core Angular). In order to use <a href="api/ngSanitize"><code>ngSanitize</code></a> in your module's dependencies, you need to include "angular-sanitize.js" in your application.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngChange">ngChange</a></td> <td><p>Evaluate the given expression when the user changes the input. The expression is evaluated immediately, unlike the JavaScript onchange event which only triggers at the end of a change (usually, when the user leaves the form element or presses the return key).</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngClass">ngClass</a></td> <td><p>The <code>ngClass</code> directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngClassOdd">ngClassOdd</a></td> <td><p>The <code>ngClassOdd</code> and <code>ngClassEven</code> directives work exactly as <a href="api/ng/directive/ngClass">ngClass</a>, except they work in conjunction with <code>ngRepeat</code> and take effect only on odd (even) rows.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngClassEven">ngClassEven</a></td> <td><p>The <code>ngClassOdd</code> and <code>ngClassEven</code> directives work exactly as <a href="api/ng/directive/ngClass">ngClass</a>, except they work in conjunction with <code>ngRepeat</code> and take effect only on odd (even) rows.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngCloak">ngCloak</a></td> <td><p>The <code>ngCloak</code> directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngController">ngController</a></td> <td><p>The <code>ngController</code> directive attaches a controller class to the view. This is a key aspect of how angular supports the principles behind the Model-View-Controller design pattern.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngCsp">ngCsp</a></td> <td><p>Enables <a href="https://developer.mozilla.org/en/Security/CSP">CSP (Content Security Policy)</a> support.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngClick">ngClick</a></td> <td><p>The ngClick directive allows you to specify custom behavior when an element is clicked.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngDblclick">ngDblclick</a></td> <td><p>The <code>ngDblclick</code> directive allows you to specify custom behavior on a dblclick event.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngMousedown">ngMousedown</a></td> <td><p>The ngMousedown directive allows you to specify custom behavior on mousedown event.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngMouseup">ngMouseup</a></td> <td><p>Specify custom behavior on mouseup event.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngMouseover">ngMouseover</a></td> <td><p>Specify custom behavior on mouseover event.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngMouseenter">ngMouseenter</a></td> <td><p>Specify custom behavior on mouseenter event.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngMouseleave">ngMouseleave</a></td> <td><p>Specify custom behavior on mouseleave event.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngMousemove">ngMousemove</a></td> <td><p>Specify custom behavior on mousemove event.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngKeydown">ngKeydown</a></td> <td><p>Specify custom behavior on keydown event.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngKeyup">ngKeyup</a></td> <td><p>Specify custom behavior on keyup event.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngKeypress">ngKeypress</a></td> <td><p>Specify custom behavior on keypress event.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngSubmit">ngSubmit</a></td> <td><p>Enables binding angular expressions to onsubmit events.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngFocus">ngFocus</a></td> <td><p>Specify custom behavior on focus event.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngBlur">ngBlur</a></td> <td><p>Specify custom behavior on blur event.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngCopy">ngCopy</a></td> <td><p>Specify custom behavior on copy event.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngCut">ngCut</a></td> <td><p>Specify custom behavior on cut event.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngPaste">ngPaste</a></td> <td><p>Specify custom behavior on paste event.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngIf">ngIf</a></td> <td><p>The <code>ngIf</code> directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to <code>ngIf</code> evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngInclude">ngInclude</a></td> <td><p>Fetches, compiles and includes an external HTML fragment.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngInit">ngInit</a></td> <td><p>The <code>ngInit</code> directive allows you to evaluate an expression in the current scope.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngList">ngList</a></td> <td><p>Text input that converts between a delimited string and an array of strings. The default delimiter is a comma followed by a space - equivalent to <code>ng-list=", "</code>. You can specify a custom delimiter as the value of the <code>ngList</code> attribute - for example, <code>ng-list=" | "</code>.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngModel">ngModel</a></td> <td><p>The <code>ngModel</code> directive binds an <code>input</code>,<code>select</code>, <code>textarea</code> (or custom form control) to a property on the scope using <a href="api/ng/type/ngModel.NgModelController">NgModelController</a>, which is created and exposed by this directive.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngModelOptions">ngModelOptions</a></td> <td><p>Allows tuning how model updates are done. Using <code>ngModelOptions</code> you can specify a custom list of events that will trigger a model update and/or a debouncing delay so that the actual update only takes place when a timer expires; this timer will be reset after another change takes place.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngNonBindable">ngNonBindable</a></td> <td><p>The <code>ngNonBindable</code> directive tells Angular not to compile or bind the contents of the current DOM element. This is useful if the element contains what appears to be Angular directives and bindings but which should be ignored by Angular. This could be the case if you have a site that displays snippets of code, for instance.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngPluralize">ngPluralize</a></td> <td><p><code>ngPluralize</code> is a directive that displays messages according to en-US localization rules. These rules are bundled with angular.js, but can be overridden (see <a href="guide/i18n">Angular i18n</a> dev guide). You configure ngPluralize directive by specifying the mappings between <a href="http://unicode.org/repos/cldr-tmp/trunk/diff/supplemental/language_plural_rules.html">plural categories</a> and the strings to be displayed.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngRepeat">ngRepeat</a></td> <td><p>The <code>ngRepeat</code> directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and <code>$index</code> is set to the item index or key.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngShow">ngShow</a></td> <td><p>The <code>ngShow</code> directive shows or hides the given HTML element based on the expression provided to the <code>ngShow</code> attribute. The element is shown or hidden by removing or adding the <code>.ng-hide</code> CSS class onto the element. The <code>.ng-hide</code> CSS class is predefined in AngularJS and sets the display style to none (using an !important flag). For CSP mode please add <code>angular-csp.css</code> to your html file (see <a href="api/ng/directive/ngCsp">ngCsp</a>).</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngHide">ngHide</a></td> <td><p>The <code>ngHide</code> directive shows or hides the given HTML element based on the expression provided to the <code>ngHide</code> attribute. The element is shown or hidden by removing or adding the <code>ng-hide</code> CSS class onto the element. The <code>.ng-hide</code> CSS class is predefined in AngularJS and sets the display style to none (using an !important flag). For CSP mode please add <code>angular-csp.css</code> to your html file (see <a href="api/ng/directive/ngCsp">ngCsp</a>).</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngStyle">ngStyle</a></td> <td><p>The <code>ngStyle</code> directive allows you to set CSS style on an HTML element conditionally.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngSwitch">ngSwitch</a></td> <td><p>The <code>ngSwitch</code> directive is used to conditionally swap DOM structure on your template based on a scope expression. Elements within <code>ngSwitch</code> but without <code>ngSwitchWhen</code> or <code>ngSwitchDefault</code> directives will be preserved at the location as specified in the template.</p> </td> </tr> <tr> <td><a href="api/ng/directive/ngTransclude">ngTransclude</a></td> <td><p>Directive that marks the insertion point for the transcluded DOM of the nearest parent directive that uses transclusion.</p> </td> </tr> <tr> <td><a href="api/ng/directive/script">script</a></td> <td><p>Load the content of a <code><script></code> element into <a href="api/ng/service/$templateCache"><code>$templateCache</code></a>, so that the template can be used by <a href="api/ng/directive/ngInclude"><code>ngInclude</code></a>, <a href="api/ngRoute/directive/ngView"><code>ngView</code></a>, or <a href="guide/directive">directives</a>. The type of the <code><script></code> element must be specified as <code>text/ng-template</code>, and a cache name for the template must be assigned through the element's <code>id</code>, which can then be used as a directive's <code>templateUrl</code>.</p> </td> </tr> <tr> <td><a href="api/ng/directive/select">select</a></td> <td><p>HTML <code>SELECT</code> element with angular data-binding.</p> </td> </tr> </table> </div> </div>