Understanding AngularJS built-in directives and how to use them

AngularJS’s built-in directives usually cover much of the core functionality we would need. In this post we shall take a look at some of the most common ones and learn a little bit about how they work.

DirectiveDescription
ng-appIt is added to set the AngularJS section.
ng-initIt sets default variable value.
ng-bindIt is an alternative to {{ }} template.
ng-bind-templateIt binds multiple expressions to the view.
ng-non-bindableIt used to not to bind data.
ng-bind-htmlIt used to bind inner HTML property of an HTML element.
ng-changeIt evaluates specified expression when the user changes the input.
ng-checkedIt is used to set checkbox checked.
ng-classIt is used to the css class dynamically.
ng-cloakIt is usedv to prevent displaying the content until AngularJS has taken control.
ng-clickIt is used to execute a method or expression when element is clicked.
ng-controllerIt is used to attach a controller class to the view.
ng-disabledIt is used to attach disabled attributes to the form element.
ng-formIt is used to set form within a form.
ng-hrefIt is used to dynamically bind AngularJS variables to the href attribute.
ng-includeIt is used to fetch, compile and include an external HTML fragment to your page.
ng-ifIt is used to remove or recreate an element in the DOM depending on an expression
ng-switchIt is used to conditionally switch control based on matching expression.
ng-modelIt is used to bind an input,select, textarea etc elements with model property.
ng-readonlyIt is used to set readonly attribute to an element.
ng-repeatIt is used to loop through each item in collection to create a new template.
ng-selectedIt is used to set selected option in <select> element.
ng-show/ng-hideIt workes based on expression, if true then the element is shown or hidden respectively.
ng-srcIt is used to dynamically bind AngularJS variables to the src attribute.
ng-submitIt is used to bind angular expressions to onsubmit events.
ng-valueIt is used to bind angular expressions to the value of <option>.
ng-requiredIt is used to bind angular expressions to onsubmit events.
ng-styleIt is used to set CSS style on an HTML element conditionally.
ng-patternIt is used to add the pattern validator to ngModel.
ng-maxlengthIt is used to adds the maxlength validator to ngModel.
ng-minlengthIt is used to adds the minlength validator to ngModel.
ng-class-evenIt works in conjunction with ngRepeat and take effect only on odd (even) rows.
ng-class-oddIt works in conjunction with ngRepeat and take effect only on odd (even) rows.
ng-cutIt is used to specify custom behavior on cut event.
ng-copyIt is used to specify custom behavior on copy event.
ng-pasteIt is used to specify custom behavior on paste event.
ng-optionsIt is used to dynamically generate a list of <option> elements for the <select> element.
ng-listIt is used to convert string into list based on specified delimiter.
ng-openIt is used to set the open attribute on the element, if the expression inside ngOpen is truthy.

ng-app

ng-app directive is used to set the AngularJS section in HTML DOM.

ng-init

ng-init directive is used to initializes an AngularJS Application default data.

ng-bind

ng-bind directive is used to display value from model object.

ng-bind-template

ng-bind-template directive is used to bind multiple expressions to the view. Unlike ng-Bind, the ngBindTemplate can contain multiple {{ }} expressions.

ng-non-bindable

ng-non-bindable 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.

In this example there are two locations where a simple interpolation binding ({{}}) is present, but the one wrapped in ngNonBindable is left alone.

Output: 

ng-bind-html

ng-bind-html directive is used to bind inner HTML property of an HTML element.

ng-change

ng-change directive is used to execute an expression when input changes.

ng-checked

ng-checked directive is used to set a checkbox as checked.

ng-class

ng-class directive is used to set the css class dynamically on an element.

ng-cloak

ng-cloak 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.

ng-click

ng-click directive is used execute a method or expression.

ng-click

ng-controller directive is used to attach a controller to the view.

ng-disabled

ng-disabled directive is used to attach disabled attributes to the form element.

ng-form

ng-form directive is used to create nested forms. Browsers do not allow nesting of forms.

ng-form has the following properties:

$validIt is used to check inputs are valid or not.
$invalidIt is used to check inputs are invalid or not.
$pristineIt is used to check inputs are unmodified by the user or not.
$dirtyIt is used to check inputs are modified by the user or not. Its just revers of pristine.
$errorThis contains collection of invalid control’s input, if a validation fail it return true, otherwise false.

ng-href

ng-href directive is used to dynamically bind AngularJS variables to the href attribute.

ng-include

ng-include directive is used to include an external HTML fragment into a page.

ng-if

ng-if directive is used to remove and completely recreate an element in the DOM if the condition is meet.

ng-switch

ng-switch directive is used to make an element visible based on an expression.

ng-model

ng-model directive binds an input,select, textarea (or custom form control) to a property on the scope.

ng-readonly

ng-readonly directive is used to make DOM elements readonly.

ng-repeat

ng-repeat directive is used to loop through a collection and creates new template for each item. Each item in the collection is given its own template and scope.

ng-repeat has the following properties:

$indexiterator offset of the repeated element (0..length-1).
$firsttrue if the repeated element is first in the iterator
$middletrue if the repeated element is between the first and last in the iterator
$lasttrue if the repeated element is last in the iterator.
$eventrue if the iterator position $index is even (otherwise false).
$oddtrue if the iterator position $index is odd (otherwise false).

ng-selected

ng-selected directive is used to make selected option in select element.

ng-show & ng-hide

ng-show & ng-hide directive is used show or hide the DOM element based its expression.

ng-src

ng-src directive is used to set path like src.

ng-submit

ng-submit prevents the default form submission action if the form does not contain action or data-action attributes. It enables us to bind angular expressions on the submit event.

ng-value

ng-submit directive is used to bind an expression to the value of an input[radio] element. It is useful when generating radio button list using ng-repeat.

ng-required

ng-required directive is used on input, select and custom controls, to set them as required fields.

ng-style

ng-style directive is used to set CSS styles on an HTML element conditionally.

ng-pattern

ng-pattern directive is used to validate input control against specified pattern. ng-pattern adds pattern validator to ng-model.

ng-maxlength & ng-minlength

ng-maxlength directive is used to add maxlength validator to ngModel. Similarly, ng-minlength directive is used to add minlength validator to ngModel.

ng-class-even & ng-class-odd

The ng-class-even and ng-class-odd directives work exactly the same as ngClass, except they work in conjunction with ngRepeat and take effect only on even (odd) rows.

ng-cut

ng-cut directive is used to specify custom behavior on the cut event.

ng-copy

ng-copy directive is used to specify custom behavior on the copy event.

ng-paste

ng-paste directive is used to specify custom behavior on the paste event.

ng-options

ng-options directive is used to dynamically generate a list of <option> elements for the <select> element.

ng-list

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

ng-open

ng-open sets the open attribute on the element, if the expression inside ngOpen is truthy.

 

Leave a Reply

Top