AngularJS Directives Complete Reference Last Updated : 29 Mar, 2024 Improve Improve Like Article Like Save Share Report Directives are markers in the Document Object Model(DOM). Directives can be used with any of controller or HTML tag which will tell the compiler what exact operation or behavior is expected. There are some directives present which is predefined but if a developer wants he can create new directives (custom-directive). Example: This example uses ng-app Directive to define a default AngularJS application. <html> <head> <title>AngularJS Directives</title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> </head> <body style="text-align:center"> <h2 style = "color:green">Geeksforgeeks</h2> <div ng-app="" ng-init="name='GeeksforGeeks'"> <p>{{ name }} is the portal for geeks.</p> </div> </body> </html> Output: The following table lists the important built-in AngularJS directives. Directives Description ng-app Start of AngularJS application. ng-init Used to initialise a variable ng-model ng-model is used to bind to the HTML controls ng-controller Attaches a controller to the view ng-bind Binds the value with HTML element ng-repeat Repeats HTML template once per each item in the specified collection. ng-show Shows or hides the associated HTML element ng-readonly Makes HTML element read-only ng-disabled Use to disable or enable a button dynamically ng-if Removes or recreates HTML element ng-click Custom step on click Directives: AngularJS | Directives AngularJS | ng-list Directive AngularJS | ng-disabled Directive AngularJS | ng-mouseup Directive AngularJS | ng-keyup Directive AngularJS | ng-focus Directive AngularJS | ng-keypress Directive AngularJS | ng-hide Directive AngularJS | ng-dblclick Directive AngularJS | ng-mousedown Directive AngularJS | ng-change Directive AngularJS | ng-maxlength Directive AngularJS | ng-blur Directive AngularJS | ng-controller Directive AngularJS | ng-mouseleave Directive AngularJS | ng-bind Directive AngularJS | ng-mouseenter Directive AngularJS | ng-click Directive AngularJS | ng-copy Directive AngularJS | ng-mousemove Directive AngularJS | ng-minlength Directive AngularJS | ng-checked Directive AngularJS | ng-if Directive AngularJS | ng-cut Directive AngularJS | ng-readonly Directive AngularJS | textarea Directive AngularJS | input Directive AngularJS | ng-include Directive AngularJS | ng-jq Directive AngularJS | ng-model Directive AngularJS | ng-transclude Directive AngularJS | ng-class-even Directive AngularJS | ng-class-odd Directive AngularJS | ng-value Directive AngularJS | ng-bind-template Directive AngularJS | ng-form Directive AngularJS | ng-bind-html Directive AngularJS | ng-class Directive AngularJS | ng-pluralize Directive AngularJS | ng-pattern Directive AngularJS | ng-style Directive AngularJS | ng-switch Directive AngularJS | ng-show Directive AngularJS | ng-srcset Directive AngularJS | ng-src Directive AngularJS | ng-submit Directive AngularJS | ng-app Directive AngularJS | ng-href Directive AngularJS | ng-required Directive AngularJS | ng-init Directive AngularJS | ng-paste Directive AngularJS | ng-open Directive AngularJS | ng-options Directive AngularJS | ng-selected Directive AngularJS | ng-non-bindable Directive Like Article Suggest improvement Previous AngularJS ng-controller Directive Next AngularJS | Filters Share your thoughts in the comments Add Your Comment Please Login to comment...