Attaching the directive by defining it as an attribute of the element does not make sense when we create a new directive as a reusable component. In this case, a better approach can restrict the directive to be an element.
The directives are restricted to be applied as an attribute to a determined element, but we can change this behavior by declaring the restriction property inside our directive configuration object. The following table shows the possible values for the restriction property:
Restriction
| Property | Values | Usage |
|---|
| Attribute (default) | A | <div alert></div> |
| Element name | E | <alert></alert> |
| Class | C | <div class="alert"></div> |
| Comment | M | <!-- directive:alert --> |
Now, we just need to include this property in our directive, as shown in the following snippet:
index.html
directives.js
parking.directive("alert", function() {
return {
restrict: 'E',
templateUrl: "alert.html",
replace: true
};
});It is also possible to combine more than one restriction at the same time by just using a subset combination of EACM. If the directive is applied without the restrictions configuration, it will be ignored by the framework.
