link

Directives can access the DOM in order to interact with its elements. It can be done by the function called link in our directive. The link function is invoked after the framework is compiled, and it is recommended that you add behavior to the directive. It takes five arguments as follows:

PropertyDescription
scopeThis is the scope object of the directive
elementThis is the element instance of directive
attrsThis is the list of attributes declared within the directive's element
ctrlThis is the controller of the require directive, and it will be available only if it is used with the require property
transcludeFnThis is the transclude function

The following code shows the accordion directive using the link function:
index.html
snippet
<accordion-item title="MMM-8790">
White - 10/10/2002 10:00
</accordion-item>
<accordion-item title="ABC-9954">
Black - 10/10/2002 10:36
</accordion-item>
<accordion-item title="XYZ-9768">
Blue - 10/10/2002 11:10
</accordion-item>
directives.html
snippet
parking.directive("accordionItem", function() {
return {
templateUrl: "accordionItem.html",
restrict: "E",
scope: {
title: "@"
},
transclude: true,
link: function(scope, element, attrs, ctrl, transcludeFn) {
element.bind("click", function() {
scope.$apply(function() {
scope.active = !scope.active;
});
});
}
};
});
accordionItem.html
<div class='accordion-item'>
{{title}}
</div>
<div ng-show='active' class='accordion-description' ng-transclude>
</div>
Related Tutorial
7. replace
9. scope
11. link

12. require
14. compile