javascript - Angular 模块的可扩展全局配置

Question

我希望为 Angular 指令/模块包含全局选项。

我可以在我的模块文件中使用 .constant()(或简单的配置对象)，但由于该模块是为其他人设计的，可以包含在他们的项目中，并且可以通过以下方式安装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);

Answer 1

您的应用和配置模块

这是我们可以定义配置 block 并注入(inject)提供程序的地方。从这里我们可以设置我们的配置选项。

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

模块

在模块中，我们可以定义一个服务来保存我们的默认配置选项。如果您不想注入(inject)它，这也可以简单地包含在指令中 var config = {}。

我们还定义了一个 Provider，它将被注入(inject)到我们的配置 block 中。

在指令中，我们只需要使用提供程序扩展 config(注入(inject)的服务或 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;
    });