Restricting Directive Behavior
You can apply a directive as an HTML element, an attribute, or both. The restrict property enables you to limit how your custom directive can be applied. The restrict property can be set to the following:
■ A: Applied as an attribute name. For example:
<my-directive></my-directive>
■ E: Applied as an element name. For example:
<div my-directive="expression"></div>
■ C: Applied as a class. For example:
<div class="my-directive: expression;"></div>
■ M: Applied as a comment. For example:
<!-- directive: my-directive expression -->
■ 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:
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:
<my-directive></my-directive>
<div my-directive></div>