AngularJS Directives

AngularJS Directives are markers on a DOM that tell the compiler of AngularJs to attach a specific behavior to that DOM element. AngularJS helps to extend HTML, using directives. AngularJS has some built in directives and it also lets us define our own directives. Basically, AngularJs directive is the extended HTML with prefix ng.
Some built in AngularJS Directives are given below.

• ng-app- This initializes the AngularJS Application. It defines the root of Angular Application.
• ng-init- This initializes the application's data.
• ng-model- This directive binds the values of AngularJS application data to HTML input controls.
• ng-bind- This directive binds the application data to View (HTML View).

 

After reading this, we must have a question in our mind about what the HTML compiler is. What does it mean to compile HTML? In AngularJS, compilation means attaching the directives to HTML elements to make them attractive in order to transform the elements.
Some AngularJS defined directives are given below.

Directive	Description
ng-app	Defines the root element of an application.
ng-bind	Binds the content of an HTML element to application data.
ng-bind-html	Binds the innerHTML of an HTML element to Application data and also removes dangerous code from the HTML string.
ng-bind-template	Specifies that the text content should be replaced with a template.
ng-blur	Specifies a behavior on blur events.
ng-change	Specifies an expression to evaluate when the content is being changed by the user.
ng-checked	Specifies if an element is checked or not.
ng-class	Specifies CSS classes on HTML elements.
ng-class-even	Same as ng-class, but will only take effect on even rows.
ng-class-odd	Same as ng-class, but will only take effect on odd rows.
ng-click	Specifies an expression to evaluate when an element is being clicked.
ng-controller	Defines the controller object for an application.
ng-copy	Specifies a behavior on copy events.
ng-cut	Specifies a behavior on cut events.
ng-dblclick	Specifies a behavior on double-click events.
ng-disabled	Specifies if an element is disabled or not.
ng-focus	Specifies a behavior on focus events.
ng-form	Specifies an HTML form to inherit the controls from.
ng-hide	Hides or shows HTML elements.
ng-href	Specifies a URL for the <a> element.
ng-if	Removes HTML element, if a condition is false.
ng-include	Includes HTML in an application.
ng-init	Defines initial values for an application.
ng-jq	Specifies that the application must use a library, like jQuery.
ng-keydown	Specifies a behavior on keydown events.
ng-keypress	Specifies a behavior on keypress events.
ng-keyup	Specifies a behavior on keyup events.
ng-list	Converts text into a list (array).
ng-maxlength	Specifies the maximum number of characters allowed in the input field.
ng-minlength	Specifies the minimum number of characters allowed in the input field.
ng-model	Binds the value of HTML controls to the application's data.
ng-model-options	Specifies how updates in the model are done.
ng-mousedown	Specifies a behavior on mousedown events.
ng-mouseenter	Specifies a behavior on mouseenter events.
ng-mouseleave	Specifies a behavior on mouseleave events.
ng-mousemove	Specifies a behavior on mousemove events.
ng-mouseover	Specifies a behavior on mouseover events.
ng-mouseup	Specifies a behavior on mouseup events.
ng-non-bindable	Specifies that no data binding can happen in this element, or its children.
ng-open	Specifies the open attribute of an element.
ng-options	Specifies <options> in a <select> list.
ng-paste	Specifies a behavior on paste events.
ng-pluralize	Specifies a message to display according to en-us localization rules.
ng-readonly	Specifies the readonly attribute of an element.
ng-repeat	Defines a template for each data in a collection.
ng-required	Specifies the required attribute of an element.
ng-selected	Specifies the selected attribute of an element.
ng-show	Shows or hides HTML elements.
ng-src	Specifies the src attribute for the <img> element.
ng-style	Specifies the style attribute for an element.
ng-submit	Specifies expressions to run on onsubmit events.
ng-switch	Specifies a condition that will be used to show/hide child elements.
ng-value	Specifies the value of an input element.

Example of a directive:

Paste your text here<div ng-app="">

    <p>FirstName: <input type="text" ng-model="fname"></p>

    <p ng-bind="fname"></p>

</div>

ng-app directive is used in the div tag <div>. This makes this div tag the owner of this AngularJS application, which means this confirms that from this div, we are staring the Angular application and Angular features will be starting from this tag.

ng-model directive, in the input tag, binds the value of this input field to variable “fname.”This fname's value has been assigned by this ng-model. Whatever we type in this input field, the value will be assigned to fname variable. ng-bind directive now binds the value, which was assigned to the variable “fname”, to innerHtml of the <span> tag.

Reference:
Overview Of AngularJS Directives