There are components that might need to wrap other elements in order to decorate them, such as alert, tab, modal, or panel. It is necessary to fall back upon a directive feature called transclude. This feature allows us to include the entire snippet from the view than just deal with the parameters. In the following code snippet, we will combine the scope and transclude strategies in order to pass parameters to the directive:
index.html
<alert topic="Something went wrong!">
You must inform the plate and the color of the car!
</alert>
directives.js
snippet
parking.directive("alert", function() {
return {
restrict: 'E',
scope: {
topic: '@'
},
templateUrl: "alert.html",
replace: true,
transclude: true
};
});alert.html
snippet
<div class="alert">
<span class="alert-topic">
{{topic}}
</span>
<span class="alert-description" ng-transclude>
</span>
</div>
The next properties that we are going to study are considered more complex and reserved for advanced components. They are required every time we need to deal with the DOM or interact with other directives. These properties are link, require, controller, and compile.
