Restricting Directive Behavior

You can apply a directive as an HTML element, an attribute, or both. The restrict property allows you to limit how your custom directive can be applied. The restrict property can be set to:

A: Applied as an attribute name.

E: Applied as an element name.

C: Applied as a class name.

AEC: Applied as an attribute, an element, or a class name. You can also use other combinations, such as AE or AC.

For example, you can apply the following directive as an attribute or an element:

Click here to view code image

directive('myDirective', function() {
  return {
    restrict: 'AE',
    templateUrl: '/myDirective.html'
  };
});

The following shows how to implement the directive as both an element and an attribute. Notice that the camelCase name is replaced by one with hyphens:

Click here to view code image

<my-directive></my-directive>
<div my-directive></div>