title: Using addClass in Link function vs uisng addClass in Compile function in AngularJS
body: <p>Can anyone explain what is happening in this code? I understand that <code>link</code> function is executed after <code>compile</code>.</p>
  
  <p><code>link vs compile.js</code> is:</p>
  
  <pre><code>var app = angular.module('myApp', []);
  app.directive('highlight', function () {
      return {
          restrict: 'A',
          compile: function ($element, $attr, $transclude) {
              console.log('executed highlight');
              $element.addClass("highlight");
              //$element.addClass("red");
  
          }
      };
  });
  
  app.directive('red', function () {
      return {
          restrict: 'A',
          link: function ($scope, $element, $attr) {
              console.log('executed red');
              $element.addClass("red");
              //$element.addClass("highlight");
  
          }
      };
  });
  </code></pre>
  
  <p><code>link vs compile.html</code> is:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html ng-app="myApp"&gt;
      &lt;head&gt;
          &lt;script src="js/angular.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="js/link vs compile.js" type="text/javascript"&gt;&lt;/script&gt;
  
          &lt;style type="text/css"&gt;
              .highlight{
                  background:yellow;
              }
  
              .red{
                  background: red;
              }
  
          &lt;/style&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;div ng-repeat="word in ['abc','def','ghi']" red highlight &gt;
              {{word}}
          &lt;/div&gt;
  
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>As a result of above is that <code>div</code> appears with the red background color which makes sense as <code>link</code> was executed later so it may have overwritten the effect <code>compile</code> function. But when I change <code>link vs compile.js</code> to this form:</p>
  
  <pre><code>var app = angular.module('myApp', []);
  app.directive('highlight', function () {
      return {
          restrict: 'A',
          compile: function ($element, $attr, $transclude) {
              console.log('executed highlight');
              //$element.addClass("highlight");
              $element.addClass("red");
  
          }
      };
  });
  
  app.directive('red', function () {
      return {
          restrict: 'A',
          link: function ($scope, $element, $attr) {
              console.log('executed red');
              //$element.addClass("red");
              $element.addClass("highlight");
  
          }
      };
  });
  </code></pre>
  
  <p>Now <code>div</code> is with <code>red</code> background, why is that? If <code>link</code> function was executed later should not <code>div</code> have <code>yellow</code> color?</p>
  
  <p>Code @ <a href="http://plnkr.co/edit/RJtnuVHtZvgFAraG2eVa?p=preview" rel="nofollow">http://plnkr.co/edit/RJtnuVHtZvgFAraG2eVa?p=preview</a></p>