While trying to wrangle custom directives in AngularJS, I’ve found the restrict property a bit tough to understand even after reading the guide:

The restrict option is typically set to:

• 'A' – only matches attribute name
• 'E' – only matches element name
• 'C' – only matches class name

These restrictions can all be combined as needed:

• 'AEC' – matches either attribute or element or class name

Here’s a real world example of each one in use. For these examples, we’ll define our directive as:

directive('exampleDirective', function(){
    return {
        restrict: 'A',
        template: 'This is an example directive',
    }
});

• restrict : ‘A’
  • <div example-directive>
  • Plunker Example
• restrict : ‘E’
  • <example-directive>
  • Plunker Example
• restrict : ‘C’
  • <div class=”example-directive”>
  • Plunker Example

Also notice that even though our directive is named ‘exampleDirective’, Angular converts it to ‘example-directive’ when compiling the html.