Purpose of angularjs link function

Question

I'm tring to well understand the angularjs link function

I've this example for custom lazy load directive

script.js:

//Code
angular.module('app', []);

angular.module('app').controller('mainCtrl', function($scope) {
    $scope.items = [2,5,23,253];  
});

angular.module('app').directive('myLazyRender', function() {
  return {
    restrict: 'A',
    transclude: 'element',
    priority: 900,
    link: function(scope, el, attr, ctrl, transclude) {
      var hasBeenShown = false;
      var unwatchFn = scope.$watch(attr.myLazyRender, function(value) {
        if(value && !hasBeenShown) {
          hasBeenShown = true;
          transclude(scope, function(clone) {
            el.after(clone);
          });
          unwatchFn();
        }
      })
    }
  }
})

angular.module('app').directive('echo', function() {
  return {
    priority: 1300,
    link: function() {
      console.log('echo');
    }
  }
})

index.html:

<!DOCTYPE html>
<html ng-app="app">

<head>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1"    rel="stylesheet"   href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="bootstrap@3.1.1" data-semver="3.1.1"  src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script data-require="angular.js@1.3.0-rc.4" data-semver="1.3.0-rc.4" src="https://code.angularjs.org/1.3.0-rc.4/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="mainCtrl">
    <h1>Hello Plunker!</h1>

    <div my-lazy-render="showit" echo ng-repeat="item in items">
        {{item}}
    </div>

    <button class="btn btn-primary" ng-click="showit = true">Render   Content</button>
  </body>

</html>

plunker link example

The documentation I've found explains that the link function intent is to create an event listener to handle events

If so, can someone explain the purpose of this event listener and type of event he can listen to in the case of transclusion of element ‘ tranclude: ‘element’ ’ for this example.

Is there a kind of DOM event to do the binding for item

In the example when I click on the Render Content Button, the item content is loaded.

The $watch is watching the `my-lazy-render` attribute. In this case `my-lazy-render="showit"`. When the value of `showit` changes to truthy, it renders the contents of the directive by executing the transclude function. — georgeawg, Jan 13 '16 at 22:49

score 1 · Accepted Answer · edited May 23 '17 at 11:46

Basically the link function sets a watcher on the object passed to the my-lazy-render attribute of the div element (in this case, showit), which executes the function when the value of that object changes. If it changes to true (which is the case when you click the button), it will duplicate the element after the current element (i.e. duplicate the div with the my-lazy-render attribute).

This duplication is done by the transclude function that gets passed to the link function. The clone parameter in this case is a copy of the element itself, because transclude is set to element. (See this answer for a little more on transclusion.)

Also, scope.$watch returns a function that when called will disable the watcher (i.e. the function will not be executed again when the value changes).

Purpose of angularjs link function

1 Answers1