AngularJS – Directives

0
892

Angularjs Directives

Also Read: Angularjs First Application

Name

Description

ngJq Use this directive to force the angular.element library. This should be used to force either jqLite by leaving ng-jq blank or setting the name of the jquery variable under window (eg. jQuery).

This example shows how to use a jQuery based library of a different name. The library name must be available at the top most ‘window’.

<!doctype html>

<html ng-app ng-jq=”jQueryLib”>

</html>

ngApp Use this directive to auto-bootstrap an AngularJS application. The ngApp directive designates the root element of the application and is typically placed near the root element of the page – e.g. on the <body> or <html> tags.

 

as element:

ng-app

ng-app=”angular.Module”

[ng-strict-di=”boolean”]>

</ng-app>

as attribute:

<ANY

ng-app=”angular.Module”

[ng-strict-di=”boolean”]>

</ANY>

a Modifies the default behavior of the html a tag so that the default action is prevented when the href attribute is empty.

 

as the element:

<a>

</a>

ngHref Using AngularJS markup like {{hash}} in an href attribute will make the link go to the wrong URL if the user clicks it before AngularJS has a chance to replace the {{hash}} markup with its value. Until AngularJS replaces the markup the link will be broken and will most likely return a 404 error. The ngHref directive solves this problem.

 

as attribute:

<A

ng-href=”template”>

</A>

ngSrc Using AngularJS markup like {{hash}} in a src attribute doesn’t work right: The browser will fetch from the URL with the literal text {{hash}} until AngularJS replaces the expression inside {{hash}}. The ngSrc directive solves this problem.

 

as attribute:

<IMG

ng-src=”template”>

</IMG>

ngSrcset Using AngularJS markup like {{hash}} in a srcset attribute doesn’t work right: The browser will fetch from the URL with the literal text {{hash}} until AngularJS replaces the expression inside {{hash}}. The ngSrcset directive solves this problem.

 

as attribute:

<IMG

ng-srcset=”template”>

</IMG>

ngDisabled This directive sets the disabled attribute on the element (typically a form control, e.g. input, button, select etc.) if the expression inside ngDisabled evaluates to truthy.

as attribute:

<INPUT

ng-disabled=”expression”>

</INPUT>

ngChecked Sets the checked attribute on the element, if the expression inside ngChecked is truthy.

as attribute:

<INPUT

ng-checked=”expression”>

</INPUT>

ngReadonly Sets the readonly attribute on the element, if the expression inside ngReadonly is truthy. Note that readonly applies only to input elements with specific types. See the input docs on MDN for more information.

as attribute:

<INPUT

ng-readonly=”expression”>

</INPUT>

ngSelected Sets the selected attribute on the element, if the expression inside ngSelected is truthy.

as attribute:

<OPTION

ng-selected=”expression”>

</OPTION>

ngOpen Sets the open attribute on the element, if the expression inside ngOpen is truthy.

as attribute:

<DETAILS

ng-open=”expression”>

</DETAILS>

ngForm Helper directive that makes it possible to create control groups inside a form directive. These “child forms” can be used, for example, to determine the validity of a sub-group of controls.

as element:

<ng-form

[name=”string”]>

</ng-form>

as attribute:

<ANY

[ng-form=”string”]>

</ANY>

as CSS class:

<ANY class=”[ng-form: string;]”> … </ANY>

form Directive that instantiates FormController.

as element:

<form

[name=”string”]>

</form>

textarea HTML textarea element control with AngularJS data-binding. The data-binding and validation properties of this element are exactly the same as those of the input element.

as element:

<textarea

ng-model=”string”

[name=”string”]

[required=”string”]

[ng-required=”string”]

[ng-minlength=”number”]

[ng-maxlength=”number”]

[ng-pattern=”string”]

[ng-change=”string”]

[ng-trim=”boolean”]>

</textarea>

input HTML input element control. When used together with ngModel, it provides data-binding, input state control, and validation. Input control follows HTML5 input types and polyfills the HTML5 validation behavior for older browsers.

as element:

<input

ng-model=”string”

[name=”string”]

[required=”string”]

[ng-required=”boolean”]

[ng-minlength=”number”]

[ng-maxlength=”number”]

[ng-pattern=”string”]

[ng-change=”string”]

[ng-trim=”boolean”]>

</input>

ngValue Binds the given expression to the value of the element.

as attribute:

<ANY

[ng-value=”string”]>

</ANY>

ngBind The ngBind attribute tells AngularJS 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.

as attribute:

<ANY

[ng-value=”string”]>

</ANY>

ngBindTemplate The ngBindTemplate directive specifies that the element text content should be replaced with the interpolation of the template in the ngBindTemplate attribute. Unlike ngBind, the ngBindTemplate can contain multiple {{ }} expressions. This directive is needed since some HTML elements (such as TITLE and OPTION) cannot contain SPAN elements.

as element:

<ng-bind-template

ng-bind-template=”string”>

</ng-bind-template>

as attribute:

<ANY

ng-bind-template=”string”>

</ANY>

ngBindHtml 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 $sanitize service. To utilize this functionality, ensure that $sanitize is available, for example, by including ngSanitize in your module’s dependencies (not in core AngularJS). In order to use ngSanitize in your module’s dependencies, you need to include “angular-sanitize.js” in your application.

as element:

<ng-bind-html

ng-bind-html=”expression”>

</ng-bind-html>

as attribute:

<ANY

ng-bind-html=”expression”>

</ANY>

ngChange 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).

as attribute:

<ANY

ng-change=”expression”>

</ANY>

ngClass The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.

as attribute:

<ANY

ng-class=”expression”>

</ANY>

as CSS class:

<ANY class=”ng-class: expression;”> … </ANY>

ngClassOdd The ngClassOdd and ngClassEven directives work exactly as ngClass, except they work in conjunction with ngRepeat and take effect only on odd (even) rows.

as attribute:

<ANY

ng-class-odd=”expression”>

</ANY>

as CSS class:

<ANY class=”ng-class-odd: expression;”> … </ANY>

ngClassEven The ngClassOdd and ngClassEven directives work exactly as ngClass, except they work in conjunction with ngRepeat and take effect only on odd (even) rows.

as attribute:

<ANY

ng-class-even=”expression”>

</ANY>

as CSS class:

<ANY class=”ng-class-even: expression;”> … </ANY>

ngCloak The ngCloak directive is used to prevent the AngularJS 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.

as attribute:

<ANY

ng-cloak>

</ANY>

as CSS class:

<ANY class=”ng-cloak”> … </ANY>

ngController The ngController 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.

as element:

<ng-controller

ng-controller=”expression”>

</ng-controller>

as attribute:

<ANY

ng-controller=”expression”>

</ANY>

ngCsp AngularJS has some features that can conflict with certain restrictions that are applied when using CSP (Content Security Policy) rules.

as attribute:

<ANY

ng-csp>

</ANY>

ngClick The ngClick directive allows you to specify custom behavior when an element is clicked.

as attribute:

<ANY

ng-click=”expression”>

</ANY>

ngDblclick The ngDblclick directive allows you to specify custom behavior on a dblclick event.

as attribute:

<ANY

ng-dblclick=”expression”>

</ANY>

ngMousedown The ngMousedown directive allows you to specify custom behavior on mousedown event.

as attribute:

<ANY

ng-mousedown=”expression”>

</ANY>

ngMouseup Specify custom behavior on mouseup event.

as attribute:

<ANY

ng-mouseup=”expression”>

</ANY>

ngMouseover Specify custom behavior on mouseover event.

<ANY

ng-mouseover=”expression”>

</ANY>

ngMouseenter Specify custom behavior on mouseenter event.

<ANY

ng-mouseenter=”expression”>

</ANY>

ngMouseleave Specify custom behavior on mouseleave event.

<ANY

ng-mouseleave=”expression”>

</ANY>

ngMousemove Specify custom behavior on mousemove event.

<ANY

ng-mousemove=”expression”>

</ANY>

ngKeydown Specify custom behavior on keydown event.

<ANY

ng-keydown=”expression”>

</ANY>

ngKeyup Specify custom behavior on keyup event.

<ANY

ng-keyup=”expression”>

</ANY>

ngKeypress Specify custom behavior on keypress event.

<ANY

ng-keypress=”expression”>

</ANY>

ngSubmit Enables binding AngularJS expressions to onsubmit events.

<form

ng-submit=”expression”>

</form>

ngFocus Specify custom behavior on focus event.

as attribute:

<window, input, select, textarea, a

ng-focus=”expression”>

</window, input, select, textarea, a>

ngBlur Specify custom behavior on blur event.

as attribute:

<window, input, select, textarea, a

ng-blur=”expression”>

</window, input, select, textarea, a>

ngCopy Specify custom behavior on copy event.

as attribute:

<window, input, select, textarea, a

ng-copy=”expression”>

</window, input, select, textarea, a>

ngCut Specify custom behavior on cut event.

as attribute:

<window, input, select, textarea, a

ng-cut=”expression”>

</window, input, select, textarea, a>

ngPaste Specify custom behavior on paste event.

as attribute:

<window, input, select, textarea, a

ng-paste=”expression”>

</window, input, select, textarea, a>

ngIf The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.

as attribute:

<ANY

ng-if=”expression”>

</ANY>

ngInclude Fetches, compiles and includes an external HTML fragment.

as element:

<ng-include

src=”string”

[onload=”string”]

[autoscroll=”string”]>

</ng-include>

as attribute:

<ANY

ng-include=”string”

[onload=”string”]

[autoscroll=”string”]>

</ANY>

as CSS class:

<ANY class=”ng-include: string; [onload: string;] [autoscroll: string;]”> … </ANY>

ngInit The ngInit directive allows you to evaluate an expression in the current scope.

as attribute:

<ANY

ng-init=”expression”>

</ANY>

as CSS class:

<ANY class=”ng-init: expression;”> … </ANY>

ngList 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 ng-list=”, “. You can specify a custom delimiter as the value of the ngList attribute – for example, ng-list=” | “.

as attribute:

<ANY

[ng-list=”string”]>

</ANY>

ngModel The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.

as attribute:

<ANY

ng-model=”expression”>

</ANY>

ngModelOptions This directive allows you to modify the behaviour of ngModel directives within your application. You can specify an ngModelOptions directive on any element. All ngModel directives will use the options of their nearest ngModelOptions ancestor.

as attribute:

<ANY

ng-model-options=”Object”>

</ANY>

ngNonBindable The ngNonBindable directive tells AngularJS not to compile or bind the contents of the current DOM element, including directives on the element itself that have a lower priority than ngNonBindable. This is useful if the element contains what appears to be AngularJS directives and bindings but which should be ignored by AngularJS. This could be the case if you have a site that displays snippets of code, for instance.

as attribute:

<ANY

ng-non-bindable>

</ANY>

as CSS class:

<ANY class=”ng-non-bindable”> … </ANY>

ngOptions The ngOptions attribute can be used to dynamically generate a list of <option> elements for the <select> element using the array or object obtained by evaluating the ngOptions comprehension expression.

as attribute:

<ANY

ng-model=”string”

ng-options=”comprehension_expression”

[name=”string”]

[required=”string”]

[ng-required=”string”]

[ng-attr-size=”string”]>

</ANY>

ngPluralize ngPluralize is a directive that displays messages according to en-US localization rules. These rules are bundled with angular.js, but can be overridden (see AngularJS i18n dev guide). You configure ngPluralize directive by specifying the mappings between plural categories and the strings to be displayed.

as attribute:

<ANY

ng-model=”string”

ng-options=”comprehension_expression”

[name=”string”]

[required=”string”]

[ng-required=”string”]

[ng-attr-size=”string”]>

</ANY>

ngRepeat The ngRepeat 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 $index is set to the item index or key.

as attribute:

<ANY

ng-repeat=”repeat_expression”>

</ANY>

ngShow The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute.

as element:

<ng-show

ng-show=”expression”>

</ng-show>

as attribute:

<ANY

ng-show=”expression”>

</ANY>

ngHide The ngHide directive shows or hides the given HTML element based on the expression provided to the ngHide attribute.

as element:

<ng-hide

ng-hide=”expression”>

</ng-hide>

as attribute:

<ANY

ng-hide=”expression”>

</ANY>

ngStyle The ngStyle directive allows you to set CSS style on an HTML element conditionally.

as attribute:

<ANY

ng-style=”expression”>

</ANY>

as CSS class:

<ANY class=”ng-style: expression;”> … </ANY>

ngSwitch The ngSwitch directive is used to conditionally swap DOM structure on your template based on a scope expression. Elements within ngSwitch but without ngSwitchWhen or ngSwitchDefault directives will be preserved at the location as specified in the template.

<ANY ng-switch=”expression”>

<ANY ng-switch-when=”matchValue1″>…</ANY>

<ANY ng-switch-when=”matchValue2″>…</ANY>

<ANY ng-switch-default>…</ANY>

</ANY>

ngTransclude Directive that marks the insertion point for the transcluded DOM of the nearest parent directive that uses transclusion.

as element:

<ng-transclude

ng-transclude-slot=”string”>

</ng-transclude>

as attribute:

<ANY

ng-transclude=”string”>

</ANY>

as CSS class:

<ANY class=”ng-transclude: string;”> … </ANY>

script Load the content of a <script> element into $templateCache, so that the template can be used by ngInclude, ngView, or directives. The type of the <script> element must be specified as text/ng-template, and a cache name for the template must be assigned through the element’s id, which can then be used as a directive’s templateUrl.

as element:

<script

type=”string”

id=”string”>

</script>

select HTML select element with AngularJS data-binding.

as element:

<select

ng-model=”string”

[name=”string”]

[multiple=”string”]

[required=”string”]

[ng-required=”string”]

[ng-change=”string”]

[ng-options=”string”]

[ng-attr-size=”string”]>

</select>

ngRequired ngRequired adds the required validator to ngModel. It is most often used for input and select controls, but can also be applied to custom controls.

as attribute:

<ANY

ng-required=”expression”>

</ANY>

ngPattern ngPattern adds the pattern validator to ngModel. It is most often used for text-based input controls, but can also be applied to custom text-based controls.

as attribute:

<ANY

ng-pattern=””>

</ANY>

ngMaxlength ngMaxlength adds the maxlength validator to ngModel. It is most often used for text-based input controls, but can also be applied to custom text-based controls.

as attribute:

<ANY

ng-maxlength=”expression”>

</ANY>

ngMinlength ngMinlength adds the minlength validator to ngModel. It is most often used for text-based input controls, but can also be applied to custom text-based controls.

as attribute:

<ANY

ng-minlength=”expression”>

</ANY>