[解決済み] 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; }
},
...
}
});
関連
-
親子コンポーネント通信を解決する3つのVueスロット
-
[解決済み】JavaScriptの配列でforEachが関数でない不具合
-
フロントエンド null のプロパティ 'disabled' を読み取れない 問題が解決された
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み】JavaScriptの関数にデフォルトのパラメータ値を設定する
-
[解決済み】AngularJSのディレクティブスコープにおける「@」と「=」の違いは何ですか?
-
[解決済み】AngularJSで属性を条件付きで適用するための最良の方法は何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
JavaScriptにおけるマクロタスクとミクロタスクの詳細
-
HTML+CSS+JavaScriptで簡単な三目並べゲームを作成する。
-
VUEグローバルフィルターの概念と留意点、基本的な使い方
-
Vueの一般的な組み込みディレクティブの説明
-
[解決済み】JavaScriptの配列でforEachが関数でない不具合
-
[解決済み】awaitは非同期関数でのみ有効です。
-
[解決済み】React - TypeError: 未定義のプロパティ 'props' を読み取ることができない。
-
[解決済み】ERROR エラーです。スイッチのname属性が指定されていないフォームコントロールの値アクセッサがない
-
[解決済み】エラー。Ionic使用中にモジュール '../lib/utils/unsupported.js' が見つかりませんでした。
-
JavaScriptのgetElementById、getElementsByTagNam、getElementsByClassNameの違いと使い方