The topic and the description are hard coded inside the alert component. The best thing to do is to pass the data that needs to be rendered as a parameter.
So we need to create a new property inside our directive configuration object called scope.
There are three ways to configure the directive scope.
Prefix Details
| Prefix | Description |
|---|
| @ | This prefix passes the data as a string. |
| = | This prefix creates a bidirectional relationship between a controller's scope property and a local scope directive property. |
| & | This prefix binds the parameter with an expression in the context ofthe parent scope. It is useful if you would like to provide some outside functions to the directive. |
In the following code snippet, we will configure some parameters inside the alert directive:
index.html
<alert topic="Something went wrong!" description="You must inform the plate and the color of the car!">
</alert>
directives.js
snippet
parking.directive("alert", function() {
return {
restrict: 'E',
scope: {
topic: '@topic',
description: '@description'
},
templateUrl: "alert.html",
replace: true
};
});alert.html
snippet
<div class="alert">
<span class="alert-topic">
<span ng-bind="topic"></span>
</span>
<span class="alert-description">
<span ng-bind="description"></span>
</span>
</div>
The left-hand side contains the name of the parameter available inside the directive's scope to be used in the template. The right-hand side contains the name of the attribute declared in the element, whose value will contain the expression to link to the property on the directive's template. By prefixing it with @, the literal value will be used as a parameter.
Following this, we are using the = prefix in order to create a bidirectional relationship between the controller and the directive. It means that every time anything changes inside the controller, the directive will reflect these changes:
index.html
<alert topic="alertTopic" description="descriptionTopic">
</alert>
controllers.js
parking.controller("parkingCtrl", function($scope) {
$scope.appTitle = "Parking";
$scope.alertTopic = "Something went wrong!";
$scope.alertMessage = "You must inform the plate and the color
of the car!";
});directives.js
snippet
parking.directive("alert", function() {
return {
restrict: 'E',
scope: {
topic: '=topic',
description: '=description'
},
templateUrl: "alert.html",
replace: true
};
});When we need to execute something within the context of the parent scope. It could be achieved using the & prefix. In the following example, we are passing a function called closeAlert to the directive, defined by the controller to close the alert box:
index.html
<alert ng-show="showAlert" topic="alertTopic" description="descriptionTopic" close="closeAlert()">
</alert>
controllers.js
snippet
parking.controller("parkingCtrl", function($scope) {
$scope.appTitle = "Parking";
$scope.showAlert = true;
$scope.alertTopic = "Something went wrong!";
$scope.alertMessage = "You must inform the plate and the color of
the car!";
$scope.closeAlert = function() {
$scope.showAlert = false;
};
});directives.js
snippet
parking.directive("alert", function() {
return {
restrict: 'E',
scope: {
topic: '=topic',
description: '=description',
close: '&close'
},
templateUrl: "alert.html",
replace: true
};
});alert.html
snippet
<div class="alert">
<span class="alert-topic">
<span ng-bind="topic"></span>
</span>
<span class="alert-description">
<span ng-bind="description"></span>
</span>
<a href="" ng-click="close()">Close</a>
</div>
Note:-
Note
If the name of the directive's scope property is the same as of the expression, we can keep just the prefix. By convention, the framework will consider the name to be the identical to the scope property name.
directives.js
snippet
parking.directive("alert", function() {
return {
restrict: 'E',
scope: {
topic: '=',
description: '=',
close: '&'
},
templateUrl: "alert.html",
replace: true
};
});
