在 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.

Answer 1

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; 
        });
    });