Angular directive

Understanding of Directive ( Collected from different sites like stackoverflow, w3school etc.)

• AngularJS lets you extend HTML with new attributes called Directives.
• Directives is a unique and powerful feature available only in Angular. Directives let you invent new HTML syntax, specific to your application.
• A directive is essentially a function that executes when the Angular compiler finds it in the DOM.
• Each directive has a name (like ng-repeat, tabs, make-up-your-own) and each directive determines where it can be used: element, attribute, class, in a comment.
• built-in directive are na-app,ng-model etc.

There are 4 different types of restriction we use while creating custom directives.

Restriction Description  
1 E Can be used as an element
                <my-directive></my-directive>
2 A Can be used as an attribute that’s applied to an element
                 <div my-directive="exp"></div>
3 C Can be used as in a CSS class definition applied to an element i.e only matches class name
                <div class="my-directive: exp;"></div>
4 M Can be used in a comment (rare)
                 <!-- directive: my-directive exp -->

We can mix 2 or more directive together also to create custom directive

'AEC' - matches either attribute or element or class name

1) Element Directive
  a) In Javascript
app.directive("productReviews", function() {
    return {
      restrict: 'E',
      templateUrl: "product-reviews.html"
    };
  });
 b) In HTML
<product-reviews></product-reviews>

2) Attribute Directive
  a) In Javascript
app.directive("productSpecs", function() {
    return {
      restrict:"A",
      templateUrl: "product-specs.html"
    };
  });
 b) In HTML
<div product-specs></div>


Note:- Camelcase name get separated by -.
So  productReviews becomes product-reviews and productSpecs becomes product-specs while using in html.