web-dev-qa-db-ja.com

AngularJSで属性接頭辞「x-」と「data-」はどのように使用されますか

私はAngularの初心者であり、「x-」および「data-」接頭辞の意味を理解しようとしています。ディレクティブのドキュメント( http://docs.angularjs。 org/guide/directive )これらの接頭辞により、ディレクティブが「HTMLバリデーターに準拠する」と記載されていますが、これは正確にはどういう意味ですか?

33
sthomps

HTML5仕様では、次のようにデータが前に付いている限り、任意の属性を使用できます。

<div data-myattribute=""></div>

一方、これは無効なHTML5です。

<div myattrbute=""></div>

data-属性の詳細については、こちらをご覧ください。

「x-」属性については、XHTML検証に固有の「x:」属性と要素を意味すると思います...

これをさらに詳しく説明するために、(何らかの理由で)XHTMLを使用する場合は、そのような名前空間を使用してカスタム属性を定義できます(ここでは要点を要約しています)。

<html xmlns:x="http://sample.com/mynamespace">
<body>
   <div x:whatever=""></div>
   <x:mytag></x:mytag>
</body>
</html>

ここで、xmlnsのURLは、実際には同様の要素間の競合を防ぐためのものです。また、検証の目的で、DOCTYPE宣言の一部としてカスタム要素と属性のDTDを提供できます。

*ブラウザーでの動作は、このxmlnsアプローチによって異なります。

要約すると:過去3年間にリリースされたほとんどのブラウザー、またはIE8 +では、これらのことについて心配する必要はありません。非常に特定の状況でのみ、本当に気になります。

30
Ben Lesh

HTML5仕様から: http://www.w3.org/html/wg/drafts/html/master/single-page.html

2つの文字「x-」で始まる属性名は、ユーザーエージェント用に予約されており、HTML言語に正式に追加されないことが保証されています。

また:

HTML構文 での使用を目的としたマークアップレベルの機能の場合、拡張機能は "x-vendor-feature"形式の新しい属性に制限する必要があります。ここで、vendorはベンダーを識別する短い文字列です拡張機能を担当し、featureは機能の名前です。新しい要素名は作成しないでください。このような拡張機能の属性を使用すると、複数のベンダーの拡張機能を同じ要素に共存させることができます。これは、要素では不可能です。 「x-vendor-feature」フォームを使用すると、仕様への将来の追加と競合するリスクなしに拡張を行うことができます。

19
KevinButler