官术网_书友最值得收藏!

首頁 >

AngularJS Directives Cookbook

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

主站蜘蛛池模板： 疏附县| 西吉县| 奇台县| 滨州市| 岐山县| 尖扎县| 扎鲁特旗| 虞城县| 永宁县| 迭部县| 铜陵市| 淮北市| 临高县| 南乐县| 长子县| 江口县| 溧阳市| 德钦县| 大安市| 贡山| 连平县| 洛隆县| 沽源县| 墨玉县| 宽甸| 尼玛县| 普兰店市| 昌图县| 孟村| 会宁县| 库尔勒市| 措美县| 海林市| 宽甸| 三亚市| 平遥县| 平顶山市| 海林市| 阳江市| 晋州市| 绥宁县|