Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

AngularJS Directives Complete Reference

  • Difficulty Level : Hard
  • Last Updated : 16 Oct, 2020

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 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> 

Output:



The following table lists the important built-in AngularJS directives.

DirectivesDescription
ng-appStart of AngularJS application.
ng-initUsed to initialise a variable
ng-modelng-model is used to bind to the HTML controls
ng-controllerAttaches a controller to the view
ng-bindBinds the value with HTML element
ng-repeatRepeats HTML template once per each item in the specified collection.
ng-showShows or hides the associated HTML element
ng-readonlyMakes HTML element read-only
ng-disabledUse to disable or enable a button dynamically
ng-ifRemoves or recreates HTML element
ng-clickCustom step on click

Directives:

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :