[AngularJS] Overriding directives with a decorator....A Pen by Nick LaRosa.

index.html

<div ng-app="codepen"> 
  <a href="" class="blue">Not Yellow</a>
  <br>
  <a href="" class="overridden">Yellowish</a>
</div>

script.js

(function(pen) {
  
  pen.config(function($provide) {
    
    $provide.decorator('aDirective', function($delegate) {
      // can also use function($delegate, anotherDirective) to inject a directive dependency delegate
      // (say that three times fast.)
      
      var directive = $delegate[0];
      
      directive.compile = function(element, attrs) {
        // here we can modify the compile function, or call another directive's compile or link functions
        
        attrs.$addClass('overridden');
        
        // if there is a link function to override or extend, we can call it here with:
        //
        // var link = directive.link;
        //
        // compile(element, attrs);
        // return function(scope, element, attrs) {
        //
        //   do something here
        //   return link(scope, element, attrs);
        // }
        
        return compile(element, attrs);
        
      };
      
      return $delegate;

    });
  });
  
  
}(angular.module('codepen', [])));

style.css

.blue {
  color: #0066FF;
}
.overridden {
  color: #FFCC00;
}

xamtG.markdown

xamtG

A Pen by Nick LaRosa on CodePen.

License.