2013-08-01 7 views
71

マイコード:角型のディレクティブ名:小文字のみ使用できますか?

app.directive('abcabc', function(){ alert('directive');}); // working 

しかし

app.directive('abcAbc', function(){ alert('directive');}); // not working ! 
app.directive('abc-abc', function(){ alert('directive');}); // not working ! 

私が間違っているの? Angularディレクティブには特別な命名規則がありますか?

答えて

116

AngularJSは皆を幸せにしようとします!

data-abc-abcのようなデータ属性を使用する方が好きな人もいますが、私はバリデータを幸せに保つことを前提としています。他の人はabc:abcのような名前空間を使用することを好みますが、他の人は実際の指令名abcAbcを使用することを好みます。またはすべてのキャップもABC_ABC。拡張属性はx-abc-abcです。

AngularJSは、これらのすべてのケースをカバーするためにHTMLで使用される名前を正規化します。 data-およびx-が取り除かれ、残りは:,-および_という単語の境界としてcamelcasedされます。これにより、上記のケースのabcAbcがJavaScriptで宣言されたディレクティブをルックアップするために使用されます。

これはすべて属性正規化(US:属性正規化)と呼ばれ、AngularJS documentationsource codeにあります。

+6

ありがとうございます!私は "あなたはどちらにでもできる"と書かれていますが、明らかにそうではありません。私はこれまでに10のアップボントしか持っていないことに驚いています。 – spikeheap

+0

また、Webコンポーネントの名前空間とインラインでもあります。 http://webcomponents.github.io/articles/web-components-best-practices/ –

+1

英国の代わりに「正規化」という言葉の米国英語形式を使用するように最後の段落を変更しましたAngularドキュメントが英語のスペルを使用しており、英国のスペルを検索しても結果は返されないため、「正規化」が行われます。 –

23

ディレクティブの対応する名前には、htmlとcamelCase内でダッシュ区切りの名前を使用する必要があります。あなたがドキュメント上で読むことができたよう

は:http://docs.angularjs.org/tutorial/step_00

+6

推奨される方法かもしれません。しかし、私はすべてのファイルの対応するディレクティブを探すのが面倒です。特に多くの単語を含む指示文の場合 – ColacX

0

まあ、ディレクティブ名は、にあります。角度は、名前と、ダッシュ、対応するディレクティブ名の属性名とキャメルケース)ここで

のため使用しています少なくともAngularJSバージョン1.4.9では小文字でなければなりません。そうでなければ、$ injectを得ることができません。

関連する問題