1

Angular ディレクティブ/モジュールのグローバル オプションを含めようとしています。

モジュールファイルでa .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);
4

1 に答える 1

2

アプリとモジュールの構成

ここで、構成ブロックを定義してプロバイダーを注入できます。これから、構成オプションを設定できます。

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 = {}。

また、構成ブロックに挿入される Provider も定義します。

ディレクティブ内ではconfig、プロバイダーを使用して拡張 (注入されたサービスまたは変数) するだけです。

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;
    });
于 2014-04-07T04:20:33.980 に答える