title: Using linker function in a angularJS directives
body: <p>I've been playing with angular directive recently and I have couple of question with regards to the link and compile functions.</p>
  
  <p>I have the following two directives, which have the same funcitonality:</p>
  
  <pre><code>App.directive('repeatX', function(){
    return {
      transclude: 'element',
      compile: function(element, attr, linker){  
        console.log('Compile repeatX');
        return function(scope, $element, attrs, ctrl){
          console.log('Link repeatX');
          var parent = $element.parent();
  
          for(var i = 0; i &lt; Number(attrs.repeatX) - 1;i++){
            var childScope = scope.$new();
            linker(childScope, function(clone){
              $element.after(clone.attr('repeat-x', 0));
            });
          }
        }
      }
    }
  });
  
  App.directive('repeatX2', function(){
    return {
      compile: function(element, attrs){
        console.log('Compile repeatX2');
        for(var i = 0; i &lt; Number(attrs.repeatX2) - 1;i++){
          element.after(element.clone().attr('repeat-X2', 0));
        }
  
        return function(){
          console.log('Link repeatX2');
        }
      }
    };
  });
  </code></pre>
  
  <p>It seems that the two directive are pretty much doing the same thing, but I quite don't understand why <code>Compile repeatX2</code> is displayed <code>n</code> times whereas the <code>Compile repeatX</code> only once.</p>
  
  <p>The second question is, what is the exact job of the <code>linker</code> function?</p>
  
  <p>I have a working example here: <a href="http://jsbin.com/rugohido/10/edit" rel="nofollow">http://jsbin.com/rugohido/10/edit</a></p>