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:
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>