在AngularJs中扩展第三方库的最佳方法

debugcn 发表于 Dev

关联

我正在使用angular bootstrap ui第三方库作为我的angular应用程序中的依赖项。我只是想知道在此库中向指令和控制器添加功能的最佳方法是什么？

我知道我可以只编辑ui-bootstrap-tpls-0.11.0.js中的指令/控制器，但是如果我重新拉动构建服务器上的依赖项，它会抹去我的更改。如果我要更新库版本，它也会抹去我的更改。我正在寻找一种扩展功能的干净方法。

例如，如果我想做一些事情，例如扩展datepicker指令以接受customMethod或customData，则可以在链接函数中使用它们。做这个的最好方式是什么？

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

提前致谢。

尘土岩

一种选择是修饰指令。装饰看起来像：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。