Home » AngularJS Tutorial » AngularJS Directive

AngularJS Directive

AngularJS Directive

A AngularJS directive is a function that is attached with DOM elements. Using Angular Directives, we can bind data to HTML using an expression. All AngularJS directives have a prefix with the ng namespace, used to extend HTML element attributes. Directives have the ability to execute methods, define behavior, attach controllers and DOM manipulations.

Directive Description
ng-bind: It is an alternative to {{ }} template.
ng-bind-template: used to binds multiple expressions to the view.
ng-non-bindable: used to tells Angular not to compile or bind the contents of the current DOM element.
ng-bind-html: used to bind inner HTML property of an HTML element.
ng-change: used To change in the input value causes a new value to be committed to the model.
ng-csv: Directive that is used to turns arrays and objects into downloadable CSV files.
ng-checked: used to checked checkbox.
ng-class: Used to set CSS classes dynamically on an HTML element
ng-cloak: used to prevent displaying the html template,until AngularJS has taken control.
ng-click: Used to execute a method or expression when element is clicked.
ng-controller: used to attached a controller class to the view.
ng-disabled: used to disabled attributes to the form element.
ng-form: HTML does not allow nesting of form elements. It is useful to nest form.
ng-file : upload Lightweight Angular directive to upload files with optional FileAPI shim for cross browser support
ng-grid: used forAngular Data Grid
ng-href: used to bind AngularJS variables to the href attribute.
ng-include: used to fetch, compile and include an external HTML fragment to your page.
ng-if: directive Used to removes and recreates a portion of the DOM tree.
ng-init: used to set the default variable value.
ng-switch: used to conditionally switch control based on matching expression.
ng-sortable: AngularJS Library used for Drag and Drop, used for sortable and draggable and supports for Touch devices.
ng-tasty: A lightweight AngularJS tasty collection of reusable UI components
ng-table: Ttable with sorting and filtering in AngularJS
ng-like: AngularJS like bar directive
ng-model: used to bind an input,select, textarea etc elements with model property.
ng-readonly: used to set readonly attribute to an element.
ng-required: used to adds the required validator to ngModel

ng-Option: used to generate a list of
ng-repeat: used to loop through each item in collection to create a new template.
ng-selected: used to set selected option in
ng-show: It workes based on expression, if true then the element is shown or hidden respectively.
ng-hide: It workes based on expression, if true then the element is shown or hidden respectively.
ng-src: Used to bind AngularJS variables to the src attribute dynamically.
ngSelected: Sets the selected attribute on the element, if the expression inside ngSelected is truth.
ng-submit: Used to bind angular expressions to onsubmit events.
ng-pattern: ngPattern adds the pattern validator to ngModel, and used to text based input validate.
, , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">