ng-app
私は AngularJS について学び始めましたが、ディレクティブとディレクティブの違いについて混乱していdata-ng-app
ます。
7 に答える
これらの回答のほとんどは、テンプレートを有効な HTMLまたはHTML Validator Compliantにするだけで、これらの用語の意味も説明していません。
確かなことはわかりませんが、これらの用語は、コードをスキャンして標準への準拠を確認する HTML 検証プログラム (lint のようなもの) に適用されるのではないかと推測しています。ng-app
それらは有効な属性として認識しません。デフォルト以外の HTML 属性の前に
data-attribute_name_here
.
そのため、 の作成者は、HTML 検証プログラムがそれらを「気に入る」ように、前にAngularJS
を含むディレクティブの代替名を作成しました。data-
実行時の動作に関してはありません。これらは、ここで説明されているように、ディレクティブの命名スタイルが異なるだけです: http://docs.angularjs.org/guide/directive
ディレクティブには、ngBind などのキャメル ケースの名前があります。このディレクティブは、キャメル ケース名を特殊文字 :、-、または _ を使用してスネーク ケースに変換することで呼び出すことができます。オプションで、ディレクティブの前に x- または data- を付けて、HTML バリデーターに準拠させることができます。以下は、可能なディレクティブ名の一部のリストです: ng:bind、ng-bind、ng_bind、x-ng-bind、および data-ng-bind。
これを読んでわかるdata-
ように、 を使用して、HTML を HTML バリデータ テストに渡すことができます。
angular名前空間を宣言できます<html xmlns:ng="http://angularjs.org" ng-app>
最新のブラウザーでは違いはありませんが、古い IE では、それを定義する XML 名前空間を宣言しない限り機能しません。
有効な XHTML ではないという検証の違いもありng-app
、Web ページが HTML 検証に失敗する原因となります。Angular では、ディレクティブにプレフィックスを付けdata-
たりx-
、検証を許可したりできます。
ページの HTML を有効にしたい場合は、ng- の代わりに data-ng- を使用できます。
これはエラーをスローします
<div ng-app="">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
これはエラーをスローしません
<div data-ng-app="scope" data-ng-init="name='test'">
<p>Input something in the input box:</p>
<p>Name: <input type="text" data-ng-model="name"></p>
<p data-ng-bind="name"></p>
</div>
これら 2 つの用語の基本的な違いは、data-ng-app は HTML を検証し、後者は検証しないことです。機能は同じままです。詳細については、w3Validator を試すことができます。
特定の HTML5 バリデーターが ng-app のようなプロパティでエラーをスローすることを除いて、2 つの間に絶対的な違いはありませんが、data-ng-app のように data- で始まるものについてはエラーをスローしません。したがって、角度ディレクティブで data- プレフィックスを使用することは適切です。
以下の方法で角度ディレクティブを使用することもできます ng-bind、ng:bind、ng_bind、data-ng-bind、x-ng-bind