AngularJS directives are used to extend HTML. These are special attributes starting with ng-prefix. Following are the various directives we can use in angularjs:
Custom Directives
AngularJS directives are what controls the rendering of the HTML inside an AngularJS application. Examples of directives are the interpolation directive ( {{ }} ), the ng-repeat directive and ng-if directive.
It is possible to implement your own directives too. This is what AngularJS refers to as "teaching HTML new tricks". This text will show you how to do that.
Directive Types
You can implement the following types of directives:
Element directives
Attribute directives
CSS class directives
Comment directives
Of these, AngularJS recommends that you try to use element and attribute directives, and leave the CSS class and comment directives (unless absolutely necessary).
The type of a directive determines how the directive is activated. An element directive is activated when AngularJS finds a matching HTML element in the HTML template. An attribute directive is activated when AngularJS finds a matching HTML element attribute. A CSS class directive is activated when AngularJS finds a matching CSS Class. And, a comment directive is activated when AngularJS finds a matching HTML comment.
When AngularJS loads ann HTML page, it traverses the DOM elements looking for any directives that are associated with each DOM element. Once it finds all of them (if there are multiple directives), it will then start running the directive and associating it with the DOM element. This all happens behind the scenes and automatically for you.
To invoke a directive from HTML, we simply can apply the directive in the DOM. That is to say, we pick one of the four methods for invoking a directive:
As an attribute:
<span my-directive></span>
As a class:
<span class="my-directive: expression;"></span>
As an element:
<my-directive></my-directive>
As a comment:
<!-- directive: my-directive expression -->
