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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>        
<head> 
    <title>AngularJS ng-app Directive</title> 
    <script src= 
    </script> 
</head> 
<body style="text-align:center"
          
    <h2 style = "color:green">ng-app directive</h2> 
    <div ng-app="" ng-init="name='GeeksforGeeks'"
        <p>{{ name }} is the portal for geeks.</p>
    </div> 
</body>   
</html> 

chevron_right


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:

 




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.