Javascript 在AngularJs中扩展第三方库的最佳方法
我使用angular bootstrap ui第三方库作为angular应用程序内的依赖项。我只是想知道在这个库中向指令和控制器添加功能的最佳方法是什么 我知道我可以在ui-bootstrap-tpls-0.11.0.js中编辑指令/控制器,但是如果我在构建服务器上重新拉取依赖项,它会抹去我的更改。如果我要更新库版本,它也会删除我的更改。我正在寻找一种干净的方法来扩展功能 例如,如果我想扩展datepicker指令以接受customMethod或customData,那么在链接函数中使用它们。最好的方法是什么Javascript 在AngularJs中扩展第三方库的最佳方法,javascript,angularjs,Javascript,Angularjs,我使用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;
});
});
可能重复感谢patrick,我尝试了使用相同名称的两个指令,但无法实现向作用域添加自定义方法或属性。不过,我可以扩展链接功能。其中还有其他答案,其中一个与此处提供的答案相同,因此我将其标记为重复。这非常相似,我尝试了其他答案,但无法使链接功能正常工作。我不知道如何在不完全覆盖的情况下扩展旧的链接函数。@dustyrockpyle提供的答案给了我最后一步。我应该删除这个问题吗?不,如果这个答案比另一个好,那就好了。谢谢,这就是我要找的,它对我很有用。