Now let's take a look at the link function property inside the directive. The template generated by a directive is meaningless unless it is compiled with the appropriate scope. Thus, by default, a directive does not get a new child scope. Instead, it is related to the parent scope. This means that if the directive is present within a controller, then it will use this controller scope instead of creating a new one.
To use this scope, we need to use the link function. We achieve this by using the link property inside the directive definition. Let's use a basic example to understand this.
Let's place the following code inside a new blank HTML file:
<!DOCTYPE html>
<html ng-app="linkdirectives">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<title>Link Function Directive</title>
</head>
<body ng-controller="LinkCtrl">
<input type="text" ng-model="colorName" placeholder="Insert a color name"/>
<link-function></link-function>
</body>
</html>Now let's add the directive code.
Here's the directive code, using simple CSS manipulation:
app.directive('linkFunction',function(){
return{
restrict: 'AE',
replace: true,
template: '<p style="background-color:{{colorName}}">Link Function Directive</p>',
link: function(scope,element,attribute){
element.bind('click',function(){
element.css('background-color','white');
scope.$apply(function(){
scope.color="white";
});
});
element.bind('mouseover',function(){
element.css('cursor','pointer');
});
}
}
});The link function takes three arguments: scope, element, and attribute. For a better understanding, we use the entire name for the arguments, without any abbreviation. It is also very common to see elem for element and attrs for attribute.
The element argument is a short version from jQuery Lite that is already included in AngularJS to manipulate the DOM without the need to use the famous $() from jQuery.
The scope element is the same from the parent controller, and the link function is used for attaching event listeners to DOM elements. Always watch the model properties for changes, and update the DOM with the new information. In this case, we used the $apply() function to update the binding.
The link function contains code used after the compilation process, such as some DOM manipulation or jQuery use. Also, the controller $scope and scope of the link function are almost the same thing.
When you use the scope element as the first parameter of the link function inside a directive, it has the same behavior of the $scope element from a controller. However, when you declare the scope: {} property with an empty object inside the directive, you create an isolate scope and both are different. We will see more about isolate scopes in the next chapter.
The controller $scope are parameters that are sent to the controller and they get there through Dependency Injection (DI). The scope of the link function are parameters sent to link and are standard order-based functions.
You can read more about the Directive Definition Object, Compile, and Link function on the official AngularJS API at https://docs.angularjs.org/api/ng/service/$compile#directive-definition-object