HTMLに精通している友人は、HTMLに多くの属性があることを知っています。たとえば、<a>タグのHREF属性は、リンクのURLアドレスを指定でき、<inupt>タグの型属性を使用して入力のタイプを指定できます。 AngularJSディレクティブは、HTML属性を拡張することにより、AngularJSアプリケーションに関数を追加します。
AngularJSディレクティブは、HTMLを拡張するために使用されます。これらはすべて、NG-プレフィックスから始まる特別な特性です。次の指令について説明します。
一般的に使用されるAngularJS指令
NG-APPディレクティブは、AngularJSアプリケーションを初期化します。
NG-Initディレクティブはアプリケーションデータを初期化します。
NG-Modelディレクティブは、アプリケーションに要素値（入力フィールドの値など）をアプリケーションにバインドします。
ng-appコマンド
NG-APP指令は、AngularJSアプリケーションを開始します。ルート要素を定義します。 AngularJSアプリケーションのWebページをロードするアプリケーションを自動的に初期化または起動します。また、さまざまなAngularJSモジュールAngularJSアプリケーションをロードするためにも使用されます。次の例では、DIV要素のNG-APP属性を使用してデフォルトのAngularJSアプリケーションを定義します。
<div ng-app = ""> ... </div>
ng-initディレクティブ
NG-Initディレクティブは、AngularJSアプリケーションのデータを初期化します。変数を使用するためにアプリケーションに値を配置するために使用されます。次の例では、国の配列を初期化します。 JSON構文を使用して、国の配列を定義します。
<div ng-app = "" ng-init = "国= [{locale： 'en-us'、name： 'United States'}、{locale： 'en-gb'、name： 'United'}、{locale： 'en-fr'、name： 'france'}]"> ... </div>ng-modelコマンド
NG-Modelディレクティブは、AngularJSアプリケーションで使用されるモデル/変数を定義します。次の例では、「name」というモデルを定義します。
<div ng-app = ""> ... <p>名前を入力してください：<入力型= "テキスト" ng-model = "name"> </p> </div>
NG-Reepeatディレクティブ
NG-Reepeatディレクティブは、HTML要素コレクションの各アイテムを繰り返します。次の例では、アレイ国を反復しました。
<div ng-app = ""> ... <p>ロケールのある国のリスト：</p> <ol> <li ng-repeat = "国の国"> {{'country：' + country.name + '、locale：' + country.locale}}} </li> </ol> </div>AngularJS指令の例
<div ng-app = "" ng-init = "firstName = 'john'"> <p>入力ボックスに入力してみてください：</p> <p> name：<input type = "text" ng-model = "firstName"> </p> <p>
NG-APP指令は、AngularJSに、現在の<div>要素がAngularJSアプリケーションであることを伝えます。 NG-Initディレクティブは、JavaScriptの定義変数と同等のデータの初期化に使用されます。 AngularJSのデータ結合、AngularJS式とAngularJSデータの同期。 {{firstName}}は、ng-model = "firstName"によって同期されます。上記の例では、ページの入力ボックスに入力したコンテンツを同期します。
知らせ
Webページには、異なる要素で実行されている複数のAngularJSアプリケーションを含めることができます。
Ng-Initを使用してデータを初期化することはあまり一般的ではありません。以降の章でデータを初期化するより良い方法を学びます。
NG-Reepeatディレクティブ
NG-Reepeatディレクティブは、JavaScriptの各ループに相当するHTML要素を繰り返します。
<div ng-app = "" ng-init = "names = ['jani'、 'hege'、 'kai']"> <p> ng-repeatを使用してarrays </p> <ul> <li ng-repeat = "x in name"> {{x}}}} </li> </div> </div>上記の例は、次のHTMLに解析されます
<ul> <li> Jani </li> <li> Hege </li> <li> kai </li> </ul>
ng-repeatはオブジェクト配列で動作します：
<div ng-app = "" ng-init = "names = [{name '、country：' norway '}、{name：' hege '、country：' sweden '}、{name：' kai '、country'}]"> <p>ループオブジェクト：</p> x.country}} </li> </ul> </div>次のHTMLに解析されます。
<ul> <li>ジャニ、ノルウェー</li> <li>ヘゲ、スウェーデン</li> <li>カイ、デンマーク</li> </ul>
カスタムコマンド
AngularJSの組み込みディレクティブに加えて、カスタムディレクティブを作成することもできます。 。方向関数を使用して、カスタムディレクティブを追加できます。カスタムディレクティブを呼び出すには、HTML要素にカスタムディレクティブ名を追加する必要があります。 Camelメソッドを使用して指令、AskH5Directiveを挙げますが、それを使用する場合は、AskH5指向性と分割する必要があります
<body ng-app = "myapp"> <askh5-directiont> </askh5-directiont> <script> var app = angular.module（ "myapp"、[]）; app.directive（ "askh5-directive"、function（）{return {template： "<h1> custive！上記の例は、次のように解析されます。
<h1>カスタムコマンド！</h1>
コマンドは、次の方法で呼び出すことができます。
要素名：<Askh5-directive> </askh5-directive>
属性：<div askh5-directive> </div>
クラス名：<div> </div>
コメント：<！ - 指令：askh5-directive->
制限の使用法を制限します
制限値は次のとおりです。
e要素名のみを使用します
プロパティは利用可能です
cクラス名のみを使用します
Mはコメントでのみ利用できます
制限のデフォルト値はEAです。つまり、コマンドは要素名と属性名を介して呼び出すことができます。
var app = angular.module（ "myapp"、[]）; app.directive（ "askh5directive"、function（）{return {restrict： "a"、semplate： "<h1> customディレクティブ！</h1>"};}）;上記のAngularjsは、プロパティコールのみを許可します。
関連する読み物：
AngularJS入門チュートリアル：AngularJS式
上記のコンテンツは、編集者が紹介したAngularjsのAngularJS入門チュートリアルです。私はそれが誰にでも役立つことを願っています！