top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

What are the different custom directive types in AngularJS?

+1 vote
338 views
What are the different custom directive types in AngularJS?
posted Jul 25, 2017 by Jdk

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

1 Answer

0 votes
 
Best answer

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 -->
answer Aug 29, 2017 by Manikandan J
...