Question

What are the Different Custom Directive Types in AngularJS?

Answer 1

There are different flavors of Angular directives depending till what level you want to restrict your custom directive.

In other words, do you want your custom directive to be applied only on HTML element or only on an attribute or just to CSS, etc.

So in all, there are four different kinds of custom directives:

• Element directives (E)
• Attribute directives (A)
• CSS class directives (C)
• Comment directives (M)

Below is a simple custom directive implementation at the element level.

JavaScript

myapp.directive('userinfo', function()
{
    var directive = {};
    directive.restrict = 'E';
    directive.template = "User : {{user.firstName}} {{user.lastName}}";
    return directie;
});

The restrict property is set to E which means that this directive can only be used at element level as shown in the code snippet below.

XML

<userinfo></userinfo>

If you try to use it at an attribute level as shown in the below code, it will not work.

HTML

<div userinfo></div>

So E for element, A for attribute, C for CSS and M for comments.