Javascript 角度模块的可扩展全局配置
我希望包括一个角度指令/模块的全局选项 我可以在我的模块文件中使用Javascript 角度模块的可扩展全局配置,javascript,angularjs,app-config,angularjs-module,Javascript,Angularjs,App Config,Angularjs Module,我希望包括一个角度指令/模块的全局选项 我可以在我的模块文件中使用.constant()(或者仅仅是一个configs对象),但是由于该模块是为其他人设计的,可以包含在他们的项目中,并且可以通过Bower安装,所以我不喜欢当模块得到更新时全局选项被吹走的想法。我知道.constant()可以包含在另一个文件中,但是用户必须包含它-相反,我更希望模块包含所有内容(默认值),然后用户可以根据需要进行扩展/修改 我正在设想一种类似于jQuery插件模式的方法,例如: $('.myElement').m
.constant()
(或者仅仅是一个configs对象),但是由于该模块是为其他人设计的,可以包含在他们的项目中,并且可以通过Bower安装,所以我不喜欢当模块得到更新时全局选项被吹走的想法。我知道.constant()
可以包含在另一个文件中,但是用户必须包含它-相反,我更希望模块包含所有内容(默认值),然后用户可以根据需要进行扩展/修改
我正在设想一种类似于jQuery插件模式的方法,例如:
$('.myElement').myPlugin({
option1: '',
option2: ''
});
插件
(function($) {
$.myPlugin = function( element, conf ) {
var $element = $(element);
var defaults = {
option1: '',
option2: '',
};
var config = $.extend( defaults, conf );
//...
};
$.fn.myPlugin = function(config) {
return this.each(function() {
if (undefined == $(this).data('myPlugin')) {
var plugin = new $.myPlugin(this, config);
$(this).data('myPlugin', plugin);
}
});
};
})(jQuery);
您的应用程序和配置模块 这是我们可以定义配置块并注入提供者的地方。从这里我们可以设置配置选项
var myApp = angular.module( 'myApp', ['myModule'] )
myApp.config( function( myDirectiveConfigProvider ) {
myDirectiveConfigProvider.config = {
option1: 'A new setting'
//option2: 'A new setting'
};
// OR
myDirectiveConfigProvider.config.option1 = 'A new setting';
//myDirectiveConfigProvider.config.option2 = 'A new setting';
});
模块
在模块中,我们可以定义一个服务来保存默认配置选项。如果您不希望将其注入var config={}
,那么也可以简单地将其包含在指令中
我们还定义了一个提供者,它将被注入到我们的配置块中
在指令中,我们只需要使用提供者扩展config
(注入服务或var)
angular.module( 'myModule', [] )
.value( 'config', {
'option1': 'my default setting',
'option2': 'my default setting'
})
.directive( 'myDirective', [ 'config', 'myDirectiveConfig', function( config, myDirectiveConfig ) {
return {
link: function( scope, element, attrs ) {
angular.extend( config, myDirectiveConfig.config );
console.log( config.option1 ); //'A new setting'
console.log( config.option2 ); //'my default setting'
}
}
}])
.provider( 'myDirectiveConfig', function() {
var self = this;
this.config = {};
this.$get = function() {
var extend = {};
extend.config = self.config;
return extend;
};
return this;
});