Imagine the number of times you have had the same snippet of the HTML code repeated over your application code. In the following code snippet, we are going to create a new directive with the code to reuse this:
index.html
directives.js
snippet
parking.directive("alert", function() {
return {
template: "<div class='alert'>" +
"<span class='alert-topic'>" +
"Something went wrong!" +
"</span>" +
"<span class='alert-description'>" +
"You must inform the plate and the color of the car!" +
"</span>" +
"</div>"
};
});The output, after AngularJS has compiled the directive, is the following:
snippet
<div alert="">
<div class="alert">
<span class="alert-topic">
Something went wrong!
</span>
<span class="alert-description">
You must inform the plate and the color of the car!
</span>
</div>
</div>
