Override a directive's link function

Question

I'm working on an application that's using the excellent UI Bootstrap library. Everything works fine, but I've hit upon a bug with the collapse plugin that breaks on IE10. I'm using the collapse plugin for the main nav and having this broken is a pretty big deal, so I need to figure a way around it.

I really don't want to hack the main library. It seems like I ought to be able to decorate this third party directive using approaches found here or here or here, but I can't seem to get it to work.

Specifically, I'm trying to override the extend() function that lives in the collapse directive's link() function to do a check for IE10 browser.

Has anyone done this or have an idea how to do this?

Answer 1

Sure! You can decorate the directive and extend it or completely override it. Here is an excellent blog post on this

Most straight forward way would be to just do:

app.config(function($provide) {
  $provide.decorator('collapseDirective', function($delegate) {
    var directive = $delegate[0];

    var link = function myLinkFnOverride(scope, element, attrs) {
           // code here...
    }

    directive.compile = function() {
      return function(scope, element, attrs) {
        link.apply(this, arguments);
      };
    };

    return $delegate;
  });
});

which will completely override the original link function (will need to copy paste all of it and change the parts you want)