Question

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

据我所知，我可以编辑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>

提前致谢。

Answer 1

一个选项是装饰指令。装饰看起来像：

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

以角度扩展第三方库的最佳方式

1 个答案: