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?
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?
Share Improve this question edited Mar 8, 2015 at 22:33 Rahil Wazir 10.1k11 gold badges44 silver badges65 bronze badges asked Mar 8, 2015 at 21:59 ScottScott 1,8721 gold badge34 silver badges53 bronze badges1 Answer
Reset to default 20Sure! You can decorate the directive and extend it or pletely 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.pile = function() {
return function(scope, element, attrs) {
link.apply(this, arguments);
};
};
return $delegate;
});
});
which will pletely override the original link function (will need to copy paste all of it and change the parts you want)