web-dev-qa-db-ja.com

ng-appとdata-ng-appの違いは何ですか？

私は現在、 これはチュートリアルビデオを開始しています for angular.jsを見ています

しばらくすると（12'40 "以降）、スピーカーはng-appとdata-ng-app=""属性が<html>タグ内でほぼ同等であり、またng-model="my_data_bindingとdata-ng-model="my_data_binding"も同等であると述べています。使用される属性に応じて。

ng-プレフィックスとdata-ng-プレフィックスの2つの方法の違いを説明できますか？

html5angularjs
225
Stephane Rolland

良い質問。違いは簡単です。2つのexceptの間に違いはまったくありません。特定のHTML5バリデーターはng-appのようなプロパティでエラーをスローしますが、プレフィックス付きのエラーに対してはエラーをスローしません。 data-など、data-ng-appを使用します。

したがって、HTMLの検証を少し簡単にしたい場合は、data-ng-appを使用して質問に答えてください。

楽しい事実：x-ng-appを使用して同じ効果を得ることができます。

400
Code Whisperer

Angularjsドキュメント から

Angularは、要素のタグと属性名を正規化して、どの要素がどのディレクティブに一致するかを判断します。通常、ディレクティブは大文字と小文字を区別するキャメルケースの正規化された名前（ngModelなど）で参照します。ただし、HTMLでは大文字と小文字が区別されないため、通常はDOM要素のダッシュ区切りの属性（ng-modelなど）を使用して、DOMのディレクティブを小文字の形式で参照します。

正規化プロセスは次のとおりです。

要素/属性の前からx-とdata-を取り除きます。 ：、-、または_で区切られた名前をcamelCaseに変換します。 ngBindに一致する要素の同等の例を次に示します：

上記のステートメントに基づいて、すべてが有効なディレクティブです

1。 ng-bind
2。 ng：bind
3。 ng_bind
4。データngバインド
5。 x-ng-bind

63
srinu

違いは、カスタムdata-*attributesが HTML5仕様 で有効であるという事実にあります。したがって、マークアップを検証する必要がある場合は、ng属性ではなく、マークアップを使用する必要があります。

29
Manu Letroll

短い答え：

ng-modelとdata-ng-modelは同じで同等です！

どうして？

  1. 理由：data-プレフィックス
    HTML5仕様 は、カスタム属性にdata-がプレフィックスとして付加されることを想定しています。

  2. の理由：ng-modelとdata-ng-modelは同じで同等です。

AngularJSドキュメント-正規化

Angularは、要素のタグと属性名を正規化して、どの要素がどのディレクティブに一致するかを判断します。通常、ディレクティブは大文字と小文字を区別して参照します camelCase 正規化された名前（ngModelなど）。ただし、HTMLでは大文字と小文字が区別されないため、通常はDOM要素の dash-delimited 属性を使用して、DOMのディレクティブを小文字で参照します（例：ng-model）。

正規化プロセスは次のとおりです。
1。要素/属性の前からx-とdata-を取り除きます。
2。 :、-、または_で区切られた名前をcamelCaseに変換します。

例えば
次の形式はすべて同等であり、ngBindディレクティブに一致します。

<div ng-controller="Controller">
  Hello <input ng-model='name'> <hr/>
  <span ng-bind="name"></span> <br/>
  <span ng:bind="name"></span> <br/>
  <span ng_bind="name"></span> <br/>
  <span data-ng-bind="name"></span> <br/>
  <span x-ng-bind="name"></span> <br/>
</div>
13
Eddy

ページのHTMLを有効にする場合は、ng-の代わりにdata-ng-を使用できます。

2
NNaseet

ブラウザーに提供する前にサーバー上のhtmlまたはhtml-fragmentsを操作する場合は、ng-xxx属性だけでなく、data-ng-xxx属性を使用することをお勧めします。

  1. Htmlを有効にします。つまり、domdocument（php）などのhtml（サーバーベース）パーサーで使用できます。これらのパーサーは、整形式でないhtmlで失敗することがよくあります。
  2. Angularは属性を正規化しますが、サーバーではなくクライアントにあることを忘れないでください。
1
Kees Hessels