Angularディレクティブ-要素または属性？

Question

私は約6人のUI開発者がいるチームの一員ですが、品質はさまざまですが、Angularの経験はほとんどありません。多くは請負業者であり、コードベースの経験はほとんどありません。アプリには非常に豪華なものがあります。（複雑）UI。これはIE8 +をサポートします（まもなくIE9 +がサポートされます）。

アプリの主要な拡張機能としてAngularを紹介しています。チームでのAngularの使用に関するガイドラインを書くように求められました。

ディレクティブを使用して、名前の衝突を回避するために、すべて「ipwr」で始まる、豪華なUI要素を作成します。開発者がディレクティブに制限「要素」または「属性」を与えることを義務付けるかどうかを決定しようとしています。混乱と混乱を避けるために、1つだけを義務付けます。

私の質問は、ディレクティブ、「要素」、または「属性」に対してどの制限がより優れているか、またはより一般的であるかです。私の主な関心事は、アプリケーションコードベースに不慣れな、Angularの経験がほとんどない人にとっての使いやすさ、バグの削減、動作のコピーと貼り付けなどです。

ckruszynsky · Accepted Answer

angularガイダンスでは、ディレクティブがテンプレートを完全に制御できる場合は常に「要素」の制限を使用する必要があることを示しています。つまり、レンダリングするテンプレートがある場合などです。

属性については、既存の要素に「動作」を追加する場合、または既存の要素を装飾する場合にのみ、これらを使用することをお勧めします。

たとえば、ng-clickディレクティブについて考えてみましょう。クリックディレクティブはクリック動作を一部の要素に追加するだけなので、これは要素ではなく属性として使用されます。

別の例はng-repeatディレクティブです。それは、それが使用されている要素を繰り返すため、要素としてではなく属性としても使用されます。

さて、このガイダンスはangularのドキュメントからのものですが、要素と属性のどちらが「より良い」アプローチを提供するのかは慣習ではないのではないかと思います。

古いブラウザをサポートする必要がある場合は、コメントまたはクラスディレクティブの使用を検討してください。

私の個人的な好みは、属性制限を使用することです。主にangularに不慣れな人は、制限とそれが使用できるオプションのバリエーションを見ると、最初は圧倒されます。

James Lawruk · Answer

これらのタイプの決定を行うとき、私は通常 John Papa AngularJSスタイルガイドに従います。彼は言う：

スタンドアロンの場合は要素として、既存のDOM要素を拡張する場合は属性として実装することに傾けます。

Crazyleopard · Answer

HTMLを有効に保ちたい場合は、属性を使用します。ディレクティブipwr-modalがある場合は、<div data-ipwr-modal="you-could-put-some-binding-here"></div>として宣言できます。

ただし、カスタムレイアウトでディレクティブを作成する場合は、要素宣言を使用することをお勧めします（HTMLを有効にする必要がない場合）。これは、「ねえ、ここにカスタムコンポーネントがあります」と言うより明白な方法です。

このブログ投稿では、さらにいくつかのアイデアで説明しています

gkalpak · Answer

考慮すべきいくつかのポイント：

ほとんどの場合、属性は最良/最も便利なオプションです（たまたまデフォルトではありません）。
要素にバインドされたディレクティブで実行できることはすべて、属性にバインドされたディレクティブでも実行できます。
要素にバインドされたディレクティブは、説明的で読みやすい場合があります。
コードで特定の種類の検証を通過させる場合は、属性を使用する必要があります。
IE8をサポートする必要があるため、カスタムタグには追加のオーバーヘッド（詳細）があり、保守性が損なわれることに注意してください。

_{ところで、（機能に影響を与えることなく）要素のみにディレクティブを制限することはできないため、「要素」を許可するかどうかの問題です。要素には複数のディレクティブが含まれることが多く、同じ要素に配置されたディレクティブは連携して相互の動作を強化する場合があります。したがって、ディレクティブの使用を「要素」に制限することは、要素ごとのカスタムディレクティブの数を1に制限することを意味し、機能の可能性を大幅に削減します。}

とはいえ、これは私が（やる）ことです。

IE8が問題でない場合は、両方を許可します（ほとんどの場合、属性を使用します）。
IE8（またはカスタムタグのオーバーヘッド）が問題になる場合は、属性のみを使用してください。
一般に、1つのフォームのみを許可する場合は、それを属性にする必要があります（どこでも機能し、余分なオーバーヘッドはなく、すべての機能を提供します）。