- AngularJS Directives Cookbook
- Fernando Monteiro
- 458字
- 2021-07-30 10:09:04
Using the link function
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.
Getting ready
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.
How to do it…
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');
});
}
}
});
How it works…
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.
Tip
AngularJS has a lightweight version of jQuery, called jQuery Lite.
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.
There's more…
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.
See also
- 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
- Learning LibGDX Game Development（Second Edition）
- 程序員面試筆試寶典（第3版）
- PHP基礎(chǔ)案例教程
- Learning Data Mining with Python
- Koa開發(fā)：入門、進(jìn)階與實戰(zhàn)
- Learning Laravel 4 Application Development
- RISC-V體系結(jié)構(gòu)編程與實踐（第2版）
- Processing創(chuàng)意編程指南
- Hadoop 2.X HDFS源碼剖析
- 網(wǎng)絡(luò)數(shù)據(jù)采集技術(shù)：Java網(wǎng)絡(luò)爬蟲實戰(zhàn)
- jQuery技術(shù)內(nèi)幕：深入解析jQuery架構(gòu)設(shè)計與實現(xiàn)原理
- 視窗軟件設(shè)計和開發(fā)自動化：可視化D++語言
- Monitoring Docker
- Qt 5.12實戰(zhàn)
- Flask開發(fā)Web搜索引擎入門與實戰(zhàn)