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:


PropertyValues Usage
Attribute (default)A<div alert></div>
Element nameE<alert></alert>
ClassC<div class="alert"></div>
CommentM<!-- directive:alert -->

Now, we just need to include this property in our directive, as shown in the following snippet:

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.
Related Tutorial
7. replace
9. scope
11. link
12. require
14. compile