template

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