AngularJS - What are the different custom directive types in AngularJS?

Ref:- http://www.codeproject.com/Articles/891718/AngularJS-Interview-Questions-and-Answers#Whatarecontrollersandneedofng-controllerandng-modelinAngular

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.

Hide   Copy Code

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.

Hide   Copy Code

<userinfo></userinfo>

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

Hide   Copy Code

<div userinfo></div>

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

What if I want custom directives to be applied on element as well as attributes ?

Hide   Copy Code

directive.restrict = 'EA';

Can I set an Angular directive template to a HTML web page?

Yes, you can set template to page directly by using “templateUrl” property of the directive as shown in the code snippet below.

Hide   Copy Code

directive.templateUrl = "/templates/footer.html";