AngularJS Essentials

Chapter 2
The following code is the compiled directive without the original element:
Something went wrong!
You must inform the plate and the color of the car!
restrict
We attached our first directive by defining it as an attribute of the element. However,
when we create a new directive as a reusable component, it doesn't make much
sense. In this case, a better approach can restrict the directive to be an element.
By default, 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
Element name E
Class C
Comment M
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
};
});
[ 37 ]
www.it-ebooks.info