Angularjs Directives



  • AngularJS introduces some extended new attributes in HTML called Directives.
  • AngularJS enhance your application by providing extra functionality by built-in directives.
  • AngularJS supports us to define our own directives.
  • Following are some important built-in directive in AngularJS
    • ng-app directive defines the root element of AngularJS application.
    • ng-init directive initialize the AngularJS application data.
    • ng-model directive bind the <input> fields of HTML values to the application variable by name.
    • ng-bind directive to bind the application variable value to the HTML Element.

AngularJS Directive List:

Directive Description
ng-app It is used to define the root element for angularjs application.
ng-bind It is used to binds the content of an html element to application data.
ng-bind-html It is used to binds the innerhtml of an html element to application data, and also removes dangerous code from the html string.
ng-bind-template It is used to specify that the text content should be replaced with a template.
ng-blur It is used to specify a behavior on blur events.
ng-change It is used to specify an expression to evaluate when content is being changed by the user.
ng-checked It is used to specify if an element is checked or not.
ng-class It is used to specify css classes on html elements.
ng-class-even It is used to same as ng-class, but will only take effect on even rows.
ng-class-odd It is used to same as ng-class, but will only take effect on odd rows.
ng-click It is used to specify an expression to evaluate when an element is being clicked.
ng-cloak It is used to prevent flickering when your application is being loaded.
ng-controller It is used to define the controller object for an application.
ng-copy It is used to specify a behavior on copy events.
ng-csp It is used to changes the content security policy.
ng-cut It is used to specify a behavior on cut events.
ng-dblclick It is used to specifies a behavior on double-click events.
ng-disabled It is used to specify if an element is disabled or not.
ng-focus It is used to specify a behavior on focus events.
ng-form It is used to specify an html form to inherit controls from.
ng-hide It is used to hides or shows html elements.
ng-href It is used to specify a url for the <a> element.
ng-if It is used to removes the html element if a condition is false.
ng-include It is used to include html in an application.
ng-init It is used to include html in an application.
ng-jq It is used to specify that the application must use a library, like jquery.
ng-keydown It is used to specify a behavior on keydown events.
ng-keypress It is used to specify a behavior on keypress events.
ng-keyup It is used to specify a behavior on keyup events.
ng-list It is used to converts text into a list (array).
ng-maxlength It is used to specify the maximum number of characters allowed in the input field.
ng-minlength It is used to specify the minimum number of characters allowed in the input field.
ng-model It is used to binds the value of html controls to application data.
ng-model-options It is used to specify how updates in the model are done.
ng-mousedown It is used to specify a behavior on mousedown events.
ng-mouseenter It is used to specify a behavior on mouseenter events.
ng-mouseleave It is used to specify a behavior on mouseleave events.
ng-mousemove It is used to specify a behavior on mousemove events.
ng-mouseover It is used to specify a behavior on mouseover events.
ng-mouseup It is used to specify a behavior on mouseup events.
ng-non-bindable It is used to specify that no data binding can happen in this element, or its children.
ng-open It is used to specify the open attribute of an element.
ng-options It is used to specifies <options> in a <select> list.
ng-paste It is used to specify a behavior on paste events.
ng-pluralize It is used to specify a message to display according to en-us localization rules.
ng-readonly It is used to specify the readonly attribute of an element.
ng-repeat It is used to define a template for each data in a collection.
ng-required It is used to specify the required attribute of an element.
ng-selected It is used to specify the selected attribute of an element.
ng-show It is used to shows or hides html elements.
ng-src It is used to specify the src attribute for the <img> element.
ng-srcset It is used to specify the srcset attribute for the <img> element.
ng-style It is used to specify the style attribute for an element.
ng-submit It is used to specify expressions to run on onsubmit events.
ng-switch It is used to specify a condition that will be used to show/hide child elements.
ng-transclude It is used to specify a point to insert transcluded elements.
ng-value It is used to specify the value of an input element.

AngularJS Directives on html Elements:

Values Description
a The <a> tag's default behavior has been modified in AngularJS Application
form The <form> tag's default behavior has been modified in AngularJS Application
input The <input> tag's default behavior has been modified in AngularJS Application
script The <script> tag's default behavior has been modified in AngularJS Application
select The <select> tag's default behavior has been modified in AngularJS Application
textarea The <textarea> tag's default behavior has been modified in AngularJS Application


Related Searches to angularjs diretives list