Best way to extend third party libraries in AngularJs

Question

I am using the angular bootstrap ui third party library as a dependency inside my angular app. I was just wondering what is the best way to add functionality to directives and controllers inside this library?

I understand that I can just edit the directives/controllers inside ui-bootstrap-tpls-0.11.0.js, but if I were to re pull the dependencies on a build server, it would wipe away my changes. If I were to update the library version it would also wipe away my changes. I'm looking for a clean way to extend functionality.

For example, if I want to do something like extend the datepicker directive to accept a customMethod or customData then use these within the linking function. What is the best way to do this?

<datepicker ng-model="dt" custom-method="myCustomMethod()" 
    custom-attribute="myCustomAttribute" min-date="minDate" 
    show-weeks="true" class="well well-sm"></datepicker>

Thanks in advance.

possible duplicate of [Extending Angular Directive](http://stackoverflow.com/questions/17005122/extending-angular-directive) — Patrick Evans, Jun 28 '14 at 05:45
Thanks patrick, I had tried the two directives with the same name but was not able to achieve adding custom methods or attributes to the scope. I was able to extend the linking function though. — link, Jun 28 '14 at 06:00
There were other answers in there, one being the same as the answer provided here, hence why i have marked it as duplicate. — Patrick Evans, Jun 28 '14 at 06:07
It's very similar, I had tried the other answers but was unable to get the linking function working properly. I wasn't able to figure out how to extend the old linking function without completely overwriting it. The answer provided by @dustyrockpyle gave me the last step. Should I delete this question? — link, Jun 28 '14 at 06:12

score 4 · Accepted Answer · edited Feb 12 '16 at 13:05

One option is to decorate the directive. Decoration looks something like:

angular.module('app', ['ui.bootstrap']).
    config(function($provide){
        // Inject provide into the config of your app
        $provide.decorator('datepickerDirective', function($delegate){

            // the directive is the first element of $delegate
            var datepicker = $delegate[0];

            // Add whatever you want to the scope:
            angular.extend(datepicker.scope, {
                customAttribute: '@',
                customMethod: '@'
            });

            // Might want to grab a reference to the old link incase
            // you want to use the default behavior.
            var oldLink = datepicker.link;

            datepicker.link = function(scope, element, attrs){
                // here you can write your new link function
                oldLink(scope, element, attrs);
            };

            return $delegate; 
        });
    });

Thanks this is what I was looking for, it worked for me. – link Jun 28 '14 at 05:58 — link, Jun 28 '14 at 05:58

Best way to extend third party libraries in AngularJs

1 Answers1