Angularjsに関しては、最初に考えるのは、おそらくAngularjsの最も魅力的な側面でもある双方向のデータバインディングと命令システムです。双方向のデータバインディングについては、何も言うことはないと感じています。したがって、今日は、AngularJSフレームワークの指導システムについて簡単に説明します。私は初心者でもあり、いくつかの情報を参照しています。悪いことがある場合、ワン・ワンはそれを指摘しました。
ディレクティブはAngularJSの最も重要な部分であるため、このフレームワーク自体にはより多くの指示が伴いますが、開発中はこれらの指示は通常私たちのニーズを満たすことができないため、いくつかの指示をカスタマイズする必要があります。 AngularJSディレクティブは、HTMLコードで4つの形式の表現を持つことができます。
1.新しいHTML要素として使用します。
<こんにちは> </hello>または<hello/>
2。要素の属性として使用します
<div hello> </div>
3.要素クラスとして使用します
<div> </div>
4。コメントとして使用します
<！ - 指令：こんにちは - >
ここにトラップがあることに注意してください。これは「指示：こんにちは」の後のスペースを持つことです。そうでなければ役に立たないでしょう。同時に、より少ない注釈方法を使用することをお勧めします。高品質を追求する必要がある場合は、カジュアルになります。指示には上記の4つの形式の表現があるので、それらはどのようにそれらを具体的に定義しますか？
.directive（ 'hello'、function（）{return {restrict： 'aecm'、template： '<butth> click me </button>'}}）上記は、指令を定義する最も単純なコードであり、それについて疑いの余地はありません。上記のコードでは、Directive（）メソッドは新しい命令を定義します。この方法には2つのパラメーターがあります。最初の「ハロー」は、命令の名前がhelloであることを指定することであり、2番目のパラメーターは命令オブジェクトを返す関数です。したがって、上記のコードでは、この関数は主に2つのプロパティを使用して、このハロー指令を定義します。
1.制限[String]属性は、主にHTMLコードで使用できる式の形式を指定するために使用されます。 aは属性を表し、eは要素を表し、cはクラスを表し、mはコメントを表します。実際の状況では、通常、AEの2つの方法を使用します。
2。テンプレート[Stringまたはfunction]属性は、Angularによってコンパイルおよびリンクされた後にコマンドによって生成されたHTMLマークアップを指定します。この属性は、内部の1つのHTMLテキストのみと同じくらい簡単です。または、特に複雑な場合があります。属性の値が関数の場合、メソッドはテンプレートを表す文字列を返し、式{{}}も使用できます。
テンプレート：function（）{return '<button> click me </button>'; }ただし、一般に、テンプレート属性はTemplateUrlに置き換えられ、外部ファイルアドレスを指すために使用されるため、通常はテンプレートを外部HTMLファイルに配置し、テンプレートールを使用して指すようにします。
指示を定義する場合、上記の2つの最も基本的な属性に加えて、他の多くの属性も使用します。それでは、それらについて一つずつ話しましょう：
1。優先度[number]属性、この属性は、カスタム命令の優先度を指定するために使用されます。 DOM要素に複数の命令がある場合、命令の優先順位を比較する必要があります。優先度の高い命令が最初に実行されます。この優先順位は、命令を実行する前にコンパイル関数をソートするために使用されます。したがって、コンパイル機能については以下で注意深く説明します。
2。端子[boolean]属性、このパラメーターは、この命令よりも優先度が低い現在の要素に関する命令を停止するかどうかを定義するために使用されます。値が真である場合、それは正常です。優先順位で実行されます。 falseに設定されている場合、この命令よりも優先度が低い現在の要素に関する指示は実行されません。
3. [boolean]属性を置き換えると、この属性は、生成されたHTMLコンテンツがこの指令を定義するHTML要素を置き換えるかどうかを指定するために使用されます。このプロパティの値をTrueに設定すると、コンソールを開いて見てみると、この命令によって生成された要素が次のようになります。
私たちが偽に設定すると、それは次のようになります：
。
4。link[function]属性。上記の例では、カスタマイズしたコマンドには実際にはあまり意味がありません。これは最も単純なコマンドです。私たちが定義していない多くの属性があるので、それはあまり役に立たない。たとえば、このリンク関数には、スコープ、要素、および属性の3つのパラメーターが含まれます。このリンク関数は、主にDOM要素にイベント監視を追加し、モデル属性の変更を監視し、DOMを更新するために使用されます。 3つのパラメーターがあります。
1：スコープパラメーター。命令のスコープ属性を定義しない場合、それは親コントローラーの範囲を表します。
2：要素パラメーターは、DOM要素をラップする命令のJQLite（jQueryのサブセット）です。 Angularjsを導入する前にjQueryを導入した場合、この要素はjqlite要素ではなくjquery要素です。この要素はjquery/jqliteに包まれているため、DOM操作を実行するときに$（）を使用してラップする必要はなくなりました。
3つ：ディレクティブが配置されている要素の属性の標準化されたパラメーターオブジェクトを含むattrsパラメーター。
5.スコープ[BooleanまたはObject]属性は、命令の範囲を定義するために使用されます。デフォルトではfalseです。つまり、命令は親コントローラーの範囲を継承します。親コントローラーの範囲内の属性を自由に使用できますが、このようにして、親の範囲内の属性を汚染しますが、これはお勧めできません。したがって、Scopeに次の2つの値を取ることができます：trueと{}。
本当の場合、それは角度が命令のために親の範囲から継承されたスコープを作成することを意味します。
var myApp = angular.module（ 'myApp'、[]）.controller（ 'myctrl'、['$ scope'、function（$ scope）{$ scope.color = 'red';}]）.directive（ 'hello'、function（）{return {restrict： 'aecm'、fale： '<botn ng ng-click = " style = "background-color：{{color}}"> click me </button> '、scope：true、link：function（scope、elements、attrs）{elements.bind（' click '、function（）{elemention.color'（ 'background-color'、 'blue'）;}）}}}}）ここでは、親スコープの色属性を定義し、赤に割り当てます。 Hello Directiveのスコープ属性では、Trueを提供するため、Angularはこの指令の親スコープから継承されたスコープを作成します。次に、テンプレート属性で、{{{}}を使用して、親スコープから継承された色属性を使用するため、ボタンが赤になります。
{}の場合、それは孤立したスコープが作成され、親スコープのプロパティが継承されないことを意味します。しかし、親の範囲内のプロパティまたはメソッドにアクセスする必要がある場合もありますが、どうすればよいですか？ Angularは私たちのためにこれについて長い間考えてきました。上記の操作を覚えるには3つの方法があります。
1： @を使用して、一元配置バインディングを実装します。この{}値のみをスコープに与える場合、上記のコードのボタンの背景色は灰色になります。 、そして、親スコープの色属性を使用する必要がある場合は、これを書くことができます。
scope {color： '@color'} <hello color = "{{color}}"> </hello>ここに注意すべき2つのポイントがあります。1。スコープのプロパティ色は式{{{}}の色を表し、2つは一貫している必要があります。 2。範囲内の属性色の値、つまり @の後の色は、以下のHTML要素の属性色を表します。そのため、2つも一貫している必要があります。ここの属性名がテンプレートの式{{{{}}}で使用されている名前と同じ場合、 @後の属性名は次の形式で省略して書き込むことができます。
scope {color： '@'}命令の範囲の値から、命令テンプレートの式{{{}}の色が現在の要素の色属性を指し、この色の属性の値は親スコープのプロパティ色の値であることがわかります。親スコープは、その色属性値を現在の要素の色属性に渡し、次に色属性がテンプレートの式の色に値を渡します。このプロセスは一方通行です。
2：使用=双方向結合を実装します
.directive（ 'hello'、function（）{return {restrict： 'aecm'、falple：true、template： '<button style = "background-color：{color}}"> click me </button>'、scope：{color： '='}、link：function（scope、elements、attr Elements.css（ 'background-color'、 'blue'）; $ apply（function（）{scope.color = 'pink';}）}}}）<hello color = "color"> </hello> <input type = "text" ng-model = "color"/>
ここでは、双方向の属性を、命令の範囲内の色属性と親の範囲の色属性を双方向に結合し、命令のリンク関数にクリックイベントを追加します。ボタンをクリックすると、ボタンの色が変更され、命令スコープの色属性の値が変更され、HTMLページに入力タグを追加し、親スコープの色属性の値を出力または入力します。ここに注意すべき場所があります。現在の要素の属性名の値は、式{{{}}を追加する必要はありません。ここの親スコープは、単純な文字列ではなく実際のスコープデータモデルを渡すため、単純な文字列、配列、さらには複雑なオブジェクトを命令の範囲に渡すことができます。次に、このボタンをクリックすると何が起こるか見てみましょう。
ここでは、ボタンの色がピンクに変更されたことがわかります。つまり、クリックがコマンドの範囲の色属性を変更し、ボタンの色が変更されます。しかし、ここに変更されたボタンだけではありません。入力形式の値に注意を払っていることもピンク色になります。つまり、親スコープの色属性も変更されています。さらに、入力に色を入力して、どのような変更が発生したかを確認しましょう。
、フォームに別の色を入力すると、ボタンの色も変更されることがわかります。つまり、コマンドの範囲の色属性が変更されています。要約すると、 '='を使用することは双方向の結合であることがわかります。
3つ：親の範囲でメソッドを使用して呼び出す
var myapp = angular.module（ 'myApp'、[]）.controller（ 'myctrl'、['$ scope'、function（$ scope）{$ scope.color = 'red'; $ scope.sayhello = function（）{alert（ 'hello'）;};}交換：true：true、Template： '<button ng-click = "sayhello（）" style = "background-color：{color}}"> click me </button>'、scope：{color： '='、sayhello： '＆'}、link：function（scope、elements、attrs）{elemention.bind（ 'clik（' '、'、fenction（） elements.css（ 'background-color'、 'blue'）;<hello color = "color" sayhello = "sayhello（）"> </hello> <input type = "text" ng-model = "color"/>
また、2つのことに注意する必要があります。1。テンプレート内のngクリックディレクティブを使用して、呼び出される親スコープのメソッドをバインドするだけでなく、現在の要素にプロパティを追加する必要があります。 2。命令スコープ属性の3つのSaysHello、現在の要素属性SaysHello、およびテンプレートをバインドするイベントメソッド名は一貫している必要があります。次に、ボタンをクリックして、ダイアログボックスがポップアップ表示されます。
6。TransClude[boolean]属性、この属性は、ディレクティブに任意のコンテンツを含めることができるかどうかを指定できるようにするために使用されます
.directive（ 'hello'、function（）{return {restrict： 'aecm'、cheply：true、transclude：true、scope：{}、template： '<div ng-transclude> </div>'、}}）） <こんにちは>こんにちは<span> {{color}} </span> </hello>その値が真である場合、これはページ上の値出力です。 FALSEの場合、ページは空白になります。ここに注意を払う場所があります。これは<span> {{color}} </span>です。ここの色は親の範囲の色です。これは、指令の範囲の色属性ではありません。
7。[function]パラメーターをコンパイルします。このメソッドには、2つのパラメーター要素、ATTRSがあります。最初のパラメーター要素は、命令が配置されている要素を指し、2番目の属性は、要素に割り当てられたパラメーターの標準化されたリストを指します。ここには、注意すべき場所もあります。コンパイル関数はスコープにアクセスできず、リンク関数を返す必要があります。ただし、コンパイル関数が設定されていない場合、リンク関数を正常に構成できます（コンパイルでは、リンクを使用できません。リンク関数はコンパイルによって返されます）。
.directive（ 'hello'、function（）{return {restrict： 'aecm'、falple：true、翻訳：true、trume： '<button ng-click = "syhello（）" style = "background-color：{{color}}"> click me </button>'、scope：{coler： '='、 '='、 '= （scope、elements、attrs）{elements.bind（ 'click'、function（）{elements.css（ 'background-color'、 'blue'）; $ apply（function（）{scope.color = 'pink';}）}};次に、このボタンをクリックしましょう
ここでボタンをクリックした後に起こったことは、以前にリンク属性を使用したものと同じであり、実際には大きな違いはないことがわかりました。
実際、ほとんどの場合、リンク関数のみを使用する必要があります。これは、ほとんどの指示が、イベントリスニング、監視モデル、およびリンク関数で実行できるDOMの更新の登録を検討するだけであるためです。ただし、NG-Reepeatなどの指示の場合、DOM要素を複数回クローン化して繰り返す必要があり、リンク関数が実行される前にコンパイル関数が実行されます。では、なぜ生成プロセスを完了するために2つの個別の関数が必要なのか、1つだけを使用できないのはなぜですか？この質問によく答えるには、ディレクティブがAngularでどのようにコンパイルされるかを理解する必要があります！
8。指示はどのように編集されていますか
Angular Application Bootが開始されると、Angularは$コンパイルサービスを使用してDOM要素を横断します。すべての命令が認識された後、命令のコンパイル方法が呼び出され、リンク関数が返され、リンク関数が後で実行されるリンク関数のリストに追加されます。このプロセスは、コンパイル段階と呼ばれます。 NG-Repeatのような指示は、何度も繰り返してクローンする必要があります。コンパイル関数はコンパイル段階で1回のみ実行され、これらのテンプレートはコピーされますが、リンク関数はコピーされたインスタンスごとに実行されます。そのため、パフォーマンスを改善するために個別に処理できます（この文は少し非現実的で、他の場所からコピーしました。
9。コントローラー[文字列または関数]および[stringまたはstring []]パラメーターを必要とします。他の手順がお客様の命令を操作できるようにしたい場合は、コントローラー機能を使用する必要があります。別のディレクティブが対話したい場合、指令のコントローラーインスタンスへの参照を宣言する必要があります。
.directive（ 'hello'、function（）{return {scope：{}、require： '^he'、compile：function（element、attrs）{retention、attrs、cntins）{cntins.fn（）};}}} （$ scope、$ compile、$ http）{this.fn = function {alert（ 'hello'）};<he> <hello color = "color" sayhello = "sayhello（）"> </hello> </he>
ページが読み込まれると、ダイアログボックスがポップアップします。
さて、上記は、この期間中に私が学んだ指示について私が学んだことです。これを書きましょう。
AngularJS（必須読み取り）の指示の上記の包括的な分析は、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。