Using the link function_AngularJS Directives Cookbook-QQ阅读女频幻言网

上QQ阅读APP看书，第一时间看更新

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.