I recently created my own custom directive in Angular, which is a new experience for me.
app.directive('customer',function()
{
var directive = {};
directive.restrict = 'E';
directive.template = "Customer name : <b> {{customer.custName}} </b> , Customer Email : <i> {{customer.custEmail}} </i>";
directive.scope = {
customer: "=name"
}
directive.compile = function(element, attributes)
{
element.css("border", "1px solid #f00");
var linkFunction = function($scope,element,attributes)
{
element.html("Customer name : <b>"+ $scope.customer.custName +"</b> , Customer Email : <i>"+ $scope.customer.custEmail+" </i>");
element.css("background-color", "#ff0");
}
return linkFunction;
}
return directive;
})
Why it is important to utilize compile & link function?
Could someone please elaborate on the significance of these components in a directive?
directive.scope
directive.compile
var linkfunction