Extendable global config for an Angular module

Question

I'm looking to include global options for an Angular directive/module.

I could use a .constant() (or simply an object of configs) in my module file, but since the module is designed for other people to include in their projects, and is installable via Bower, I don't like the idea of global options being blown away when the module gets an update. I'm aware that the .constant() could be included in another file, but then the user has to include it - rather I'd prefer that the module included everything (default values), and then the user could extend/modify if required.

I'm envisioning a similar approach as to a jQuery plugin pattern such as:

$('.myElement').myPlugin({
    option1: '',
    option2: ''
});

The Plugin

(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

Your App and Configuring the Module

This is where we can define a configuration block and inject a provider. From this we can set our config options.

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

The Module

Within the module we can define a service to hold our default config options. This could also simply be included in the directive if you don't wish to inject it var config = {}.

We also define a Provider which will be injected into our configuration block.

Within the directive we simply need to extend config (injected service or var) with the providers.

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