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
Follow Us #