What are the different custom directive types in AngularJS?

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.

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.

<userinfo></userinfo>

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

<div userinfo></div>

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