1. ホーム
  2. javascript

[解決済み] AngularJS ディレクティブとデフォルトのオプション

2022-04-28 02:33:55

質問

私はangularjsを始めたばかりで、いくつかの古いJQueryプラグインをAngularディレクティブに変換する作業を行っています。ディレクティブのデフォルトオプションを定義し、属性でオプションの値を指定することでオーバーライドできるようにしたいと思います。

他の人がやっている方法を探してみたのですが、その中の angular-ui ライブラリは ui.bootstrap.pagination は似たようなことをやっているようです。

まず、すべてのデフォルトのオプションは定数オブジェクトで定義されています。

.constant('paginationConfig', {
  itemsPerPage: 10,
  boundaryLinks: false,
  ...
})

次に getAttributeValue ユーティリティ関数がディレクティブコントローラにアタッチされています。

this.getAttributeValue = function(attribute, defaultValue, interpolate) {
    return (angular.isDefined(attribute) ?
            (interpolate ? $interpolate(attribute)($scope.$parent) :
                           $scope.$parent.$eval(attribute)) : defaultValue);
};

最後に、これはリンク機能で、属性を読み込むために、次のように使用されます。

.directive('pagination', ['$parse', 'paginationConfig', function($parse, config) {
    ...
    controller: 'PaginationController',
    link: function(scope, element, attrs, paginationCtrl) {
        var boundaryLinks = paginationCtrl.getAttributeValue(attrs.boundaryLinks,  config.boundaryLinks);
        var firstText = paginationCtrl.getAttributeValue(attrs.firstText, config.firstText, true);
        ...
    }
});

これは、デフォルト値のセットを置き換えるという標準的なものにしては、かなり複雑な設定のように思われます。他に一般的な方法はないのでしょうか?それとも、常に次のようなユーティリティ関数を定義するのが普通なのでしょうか? getAttributeValue というようにオプションをパースするのでしょうか?この一般的なタスクに対して、人々がどのような異なる戦略を持っているのか、知りたいと思っています。

また、オマケとして、なぜ interpolate パラメータが必要です。

解決方法は?

を使用することができます。 compile 機能 - 属性が設定されていない場合はそれを読み込み、デフォルト値で埋める。

.directive('pagination', ['$parse', 'paginationConfig', function($parse, config) {
    ...
    controller: 'PaginationController',
    compile: function(element, attrs){
       if (!attrs.attrOne) { attrs.attrOne = 'default value'; }
       if (!attrs.attrTwo) { attrs.attrTwo = 42; }
    },
        ...
  }
});