AngularJS Directives Complete Reference
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= </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
Please Login to comment...