Directives restrict

Description

We can create directives and place them in several spots.

• <my-directive></my-directive> uses directives in element tag
• <div my-directive></div> uses directives as attribute
• <div class="my-directive"> uses directives as attribute value
• <!-- directive: my-directive --> uses directives in comments

To allow Angular to invoke our directive, we need to change the restrict option.

This restrict option tells AngularJS which formats to look for when compiling the HTML.

We can specify one or many formats.

Example

The following definition tells AngularJS that my-directive can be invoked as an element (E), an attribute (A), a class (C), or a comment (M):

angular.module('myApp',  [])
.directive('myDirective',  function()  {
     return  {
          restrict: 'EACM',
          replace:  true,
          template:  '<a href="http://java2s.com">Click me</a>'
     };
});