Purpose of angularjs link function
<p>I'm tring to well understand the angularjs link function</p>

<p>I've this example for custom lazy load directive</p>

<p><strong>script.js:</strong></p>

<pre><code>//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 &amp;&amp; !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');
    }
  }
})
</code></pre>

<p><strong>index.html:</strong></p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html ng-app="app"&gt;

&lt;head&gt;
    &lt;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" /&gt;
    &lt;script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script data-require="bootstrap@3.1.1" data-semver="3.1.1"  src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;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"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="style.css" /&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;

  &lt;body ng-controller="mainCtrl"&gt;
    &lt;h1&gt;Hello Plunker!&lt;/h1&gt;

    &lt;div my-lazy-render="showit" echo ng-repeat="item in items"&gt;
        {{item}}
    &lt;/div&gt;

    &lt;button class="btn btn-primary" ng-click="showit = true"&gt;Render   Content&lt;/button&gt;
  &lt;/body&gt;

&lt;/html&gt;
</code></pre>

<p><a href="https://plnkr.co/edit/Tdh9wqm2VZivtCZlQXuO?p=preview" rel="nofollow">plunker link example</a></p>

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

<p>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 <strong>‘ tranclude: ‘element’ ’</strong> for this example.</p>

<p>Is there a kind of DOM event to do the binding for <strong>item</strong></p>

<p>In the example when I click on the <strong>Render Content</strong> Button, the <strong>item</strong> content is loaded.</p>