Extending AngularJs Directive
Probably the simplest way to solve this is to create a directive on your app with the same name as the third party directive. Both directives will run and you can specify their run order using the priority
property (higher priority runs first).
The two directives will share scope and you can access and modify the scope of the third party directive via your directive's link
method.
Option 2: You can also access a third party directive's scope by simply putting your own arbitrarily named directive on the same element with it (assuming neither directive uses isolate scope). All non-isolate scope directives on an element will share scope.
Further Reading: https://github.com/angular/angular.js/wiki/Dev-Guide%3A-Understanding-Directives
Note: My previous answer was for modifying a third party service, not a directive.
TL;DR - gimme tha demo!
Big Demo Button
Use $provide
's decorator()
to, well, decorate the third party's directive.
In our case, we can extend the directive's scope like so:
app.config(function($provide) {
$provide.decorator('paneDirective', function($delegate) {
var directive = $delegate[0];
angular.extend(directive.scope, {
disabled:'@'
});
return $delegate;
});
});
First, we request to decorate the pane
directive by passing its name, concatenated with Directive
as the first argument, then we retrieve it from the callback parameter (which is an array of directives matching that name).
Once we got it, we can obtain its scope object and extend it as needed. Notice that all of this has to be done in the config
block.
Some notes
It has been suggested to simply add a directive with the same name, then set its priority level. Aside from being unsemantic (which's not even a word, I know…), it poses issues, e.g. what if the third-party directive's priority level changes?
JeetendraChauhan has claimed (I haven't tested it though) that this solution will not work in version 1.13.