このチュートリアルでは、AngularJSバージョン：1.5.3を使用しています
angularjs github：https：//github.com/angular/angular.js/
angularjsダウンロードアドレス：https：//angularjs.org/
要約：指令（指示）著者は、それがAngularjの非常に強力で有用な機能の1つであると考えています。パブリックカスタムDOM要素またはクラス属性または属性の属性を書くことと同等であり、それだけでなく、スコープ、バインドイベント、変更スタイルなどを操作することもできます。この指令を通じて、ページングの指示、自動完了手順など、多くの公開命令をカプセル化できます。その後、多くの強力な機能を実現するために、HTMLページに単一のコードを記述するだけです。一般的に、次のシナリオを持つために、指令を使用する必要があります。
1. HTMLをよりセマンティックにすると、ページの一般的なロジックを知るためにコードとロジックを詳細に調査する必要はありません。
2。カスタムコンポーネントを要約して、他の場所に再利用します。
1。指令の定義とその使用方法
AngularJS指令の定義は、ほぼ次のとおりです
angular.module（ "app"、[]）。directive（ "directivename"、function（）{return {//アイテムの設定によって定義};}）指令は、要素名、属性、クラス、およびコメントに配置できます。以下は、指令であるMyDirを引用する同等の方法です。 （しかし、多くの指令は「プロパティ」の使用に限定されています）
<span <span style = "font-family：arial、helvetica、sans-serif;"> directive-name </span> <span style = "font-family：arial、helvetica、sans-serif;"> = "exp"> </span> // properties </span> <spanスタイル= sans-serif; "> directive-name </span >> </<span style =" font-family：arial、helvetica、sans-serif; "> directive-name </span >> </<span style =" font-family：arial、helvetica、sans-serif; "> directive-name </span> </<span style =" font " sans-serif; "> directive-name </span >> //要素<！ - ディレクティブ：<span style =" font-family：arial、helvetica、sans-serif; "> directive-name </span> <span style =" font-family：arial、helvetica、sans-serif;
次の例：
<！doctype html> <html lang = "zh" ng-app = "myapp"> <head> <head> <head charset = "utf-8"> <title> angularjsの紹介</titlejs> <script = "text/javascript" src = "./ 1.5.3/ang.min.js"> </hired> < </body> <script type = "text/javascript"> var app = angular.module（ 'myApp'、[]）; app.directive（ 'helloworld'、function（）{return {restrict： 'e'、template： '<div>こんにちは私はlin bingwen ~~~ </div>'、置換：true};}）; </script> </html>結果：
以下は、ディレクティブの詳細なバージョンです
var mymodule = angular.module（...）; mymodule.directive（ 'directivename'、function Factory（injectables）{var directivedefinitionObject = {priority：0、template： '<div> </div>'、directive.html '、置換：false、transclude：fals、balse：' a '、scope：fals、compile（compile（compile）、compile（false、transclude） Pre：function prelink（scope、iElment、controller）{...}、post：function postlink（scope、iettrs、controller）{...}}、リンク：function postlink（scope、iEtrement、iattrs）{...}};2。指令コマンドコンテンツの解釈
8つの内容があることがわかります
1.制御
（文字列）オプションのパラメーターは、DOMで宣言されている命令の形式を示します。値は次のとおりです。E（要素）、a（属性）、c（class）、m（表記）、およびデフォルト値はaです。もちろん、EAなど、2つも一緒に使用できます。表現は、要素または属性のいずれかです。
[HTML]プレーンコピーの表示コードフラグメントに導出されたコードのコードフラグメントを表示する
e（要素）：<directivename> </directivename>
a（プロパティ）：<divirectivename = 'expression'> </div>
c（class）：<div class = 'directivename'> </div>
M（注）：< - 指示：DirectivenAME expression->
一般的に言えば、E/A/Cはより頻繁に使用されます。
2.優先順位
（番号）、オプションのパラメーター、命令の優先度を指定します。単一のDOMに複数の指示がある場合、最初により高い優先度が実行されます。
3.末端
（ブール）、オプションのパラメーターは、trueまたはfalseに設定できます。 Trueに設定した場合、この命令よりも低い優先順位を持つ他の指示は無効で、呼び出されません（同じ優先度のあるものはまだ実行されます）
4.Template（文字列または関数）オプションのパラメーター。
（1）HTMLテキストの一部
<！doctype html> <html lang = "zh" ng-app = "myapp"> <head> <head> <head charset = "utf-8"> <title> angularjsの紹介</titlejs> <script = "text/javascript" src = "./ 1.5.3/ang.min.js"> </hired> < </body> <script type = "text/javascript"> var app = angular.module（ 'myApp'、[]）; app.directive（ 'helloworld'、function（）{return {restrict： 'e'、テンプレート： '<div> <h1>こんにちは私はlin bingwen ~~~ </h1> </div>'、置換：true};}）; </script> </html>（2）関数は2つのパラメーターテレメントとTattrsを受け入れることができます
テレメントとは、この指令を使用する要素を指し、Tattrsはインスタンスの属性であり、次のような要素上のすべての属性で構成されるコレクション（オブジェクト）です。
<hello-world2 title = '私は2番目の指令'> </helloworld2>
タイトルはタトゥーの属性です
テンプレートが関数であるときに何が起こるか見てみましょう
<！doctype html> <html lang = "zh" ng-app = "myapp"> <head> <head> <head charset = "utf-8"> <title> angularjsの紹介</titlejs> <script = "text/javascript" src = "./ 1.5.3/ang.min.js"> </hired> < <hello-world2 title = '私は2番目のディレクティブ'> </hello-world2> </body> <script type = "text/javascript"> var app = angular.module（ 'myApp'、[]）; app.directive（ 'helloworld'、function（）{return {restrict： 'e'、テンプレート： '<div> <h1>こんにちは私はlin bingwen ~~~ </h1> </div>'、置換：true};}）; app.directive（ "helloworld2"、function（）{return {restrict： 'eac'、template：function（telement、tattrs）{var _html = ''; _html += '<div>' +'hello' +tattrs.title +'</div> </script> </html>結果：
HelloWorld2のタグのタイトルフィールドもディレクティブで使用されていることがわかります。
5.TemplateUrl（文字列または関数）、オプションのパラメーターは、です
（1）HTMLファイルのパスを表す文字列
（2）関数は2つのパラメーターテレメントとTattrsを受け入れることができます（上記とほぼ同じ）
注：ローカル開発中にサーバーを実行する必要があります。そうしないと、TemplateUrlを使用すると、Cross Origin Request Script（CORS）エラーが発生します。 HTMLテンプレートのロードは非同期にロードされるため、多数のテンプレートをロードするとWebサイトが遅くなります。ここにトリックがあります。これは最初にテンプレートをキャッシュすることです
インデックスページをロードして、ページの一部として次のコードを含めることができます。
<script type = 'text/ng-template' id = 'hello.html'> <div> <h1>こんにちは私はlin bingwen ~~~ </h1> </div> </scrip>です
ここのID属性は、TemplateUrlに設定されています。
<！doctype html> <html lang = "zh" ng-app = "myapp"> <head> <head> <head charset = "utf-8"> <title> angularjsの紹介</titlejs> <script = "text/javascript" src = "./ 1.5.3/ang.min.js"> </hired> < </body> <script type = "text/javascript"> var app = angular.module（ 'myApp'、[]）; app.directive（ 'helloworld'、function（）{return {restrict： 'e'、templateurl： 'hello.html'、cheplage：true};}）; </script> <script type = 'text/ng-template' id = 'hello.html'> <div> <h1>こんにちは私はlin bingwen ~~~ </h1> </div> </scrip> </html>出力結果：
キャッシュする別の方法は次のとおりです。
app.run（["$ templatecache"、function（$ templatecache）{$ templatecache.put（ "hello.html"、 "<div> <h1> hi i am lin bingwen </h1> </div>"）;}]）;使用の例は次のとおりです。
<！doctype html> <html lang = "zh" ng-app = "myapp"> <head> <head> <head charset = "utf-8"> <title> angularjsの紹介</titlejs> <script = "text/javascript" src = "./ 1.5.3/ang.min.js"> </hired> < </body> <script type = "text/javascript"> var app = angular.module（ 'myApp'、[]）; app.directive（ 'helloworld'、function（）{return {restrict： 'e'、templateurl： 'hello.html'、cheplage：true};}）; app.run（["$ templatecache"、function（$ templatecache）{$ templatecache.put（ "hello.html"、 "<div> <h1> hi i am lin bingwen </h1> </div>"）;}]）; </script> </html>結果：
実際、最初の方法は優れているため、書き込みが速くなります。著者には、SCPRITに直接含まれる最初の方法が最も多く、最初の方法があります。
6.複製
（ブール値）、デフォルト値はfalseです。 Trueに設定したら、次の例を見てみましょう（テンプレートで与えられた例を比較してください）
交換が真である場合、タグのhelloworldはもう存在しません。そうでなければ、存在します。
7.スコープ
（1）デフォルト値はfalseです。親の範囲の継承を示します。
（2）真。親の範囲を継承し、独自の範囲（子スコープ）を作成することを示します。
（3）{}。まったく新しい分離範囲を作成することを示します。
7.1まず、スコープの継承メカニズムを理解しましょう。例として、ng-controllerコマンドを使用しましょう。
<！doctype html> <html lang = "zh" ng-app = "myapp"> <head> <head> <head> <heats charset = "utf-8"> <title> anduly </titlejs </titlejs> <スクリプトタイプ= "text/javascript" src = "./ 1.5.3/angular.min.js ng-controller = 'maincontroller'> father：{{name}} <入力ng-model = "name"/> <div my-direction> </div> </div> </body> <script type = "text/javascript"> var app = angular.module（ 'myapp'、[]）; App.Controller（ 'MainController'、function（$ scope）{$ scope.name = 'lin bingwen';}）; app.directive（ 'myDirective'、function（）{return {restrict： 'ea'、scope：false、テンプレート： '<div> son：{{name}} <input ng-model = "name"/>> </div>'};}）; </script> </html>次に、シンプルで明確な例を使用して、スコープ値の違いを説明します。
スコープ：FALSE
スコープ：True
範囲：{}
偽りの場合、息子は父親の価値を継承し、父親の価値を変え、息子の価値も変わり、その逆もまた同様です。 （継承は分離されていません）
本当の場合、息子は父親の価値を継承し、父親の価値を変えます。息子の価値はそれに応じて変化しますが、息子の価値が変わると、父親の価値は変わらないままです。 （相続と隔離）
{}の場合、父親の価値は継承されないため、息子の価値は空です。いずれかの当事者の価値を変更することは、相手の価値に影響を与えることはできません。 （相続財産と隔離はありません）
ヒント：再利用可能なコンポーネントを作成する場合、スコープの分離は良い選択です。スコープを分離することにより、ディレクティブが「独立」であり、任意のHTMLアプリに簡単に挿入できることを確認し、このアプローチにより親の範囲が汚染されるのを防ぎます。
7.2分離スコープ結合ポリシーを介して親スコープのプロパティにアクセスできます。
ディレクティブは、分離範囲を使用するときに分離以外の場所と対話する3つの方法を提供します。これら3つはです
@現在のDOMノードのプロパティ値にローカルスコープ属性をバインドします。 DOM属性は文字列であるため、結果は常に文字列です。
＆親範囲のコンテキストで式を実行する方法を提供します。 attr名が指定されていない場合、属性名は同じローカル名です。
= Directive属性の値を使用して、ローカルスコープ属性と親スコープ属性名の間に双方向のバインディングを作成します。
@ローカルスコープ属性
@メソッドローカル属性は、ディレクティブ外部環境によって定義された文字列値にアクセスするために使用されます。主に、指令が配置されているタグ属性を介して外部文字列値をバインドします。この結合は一方向、つまり親範囲の結合変化です。指令の範囲のプロパティは同期的に変更されますが、スコープの結合の変化は分離されており、親の範囲は不明です。
次の例：ディレクティブは、スコープタイプが分離されていないことを宣言し、 @ binding name属性を使用し、名前属性を使用してディレクティブの親スコープの属性をバインドします。親の範囲内の属性の値を変更すると、ディレクティブは値を同期して更新します。ディレクティブスコープのスコープのプロパティ値のプロパティ値を変更する場合、親スコープは値を同期して更新することはできません。
JSコード：
<！doctype html> <html lang = "zh" ng-app = "myapp"> <head> <head> <head> <heats charset = "utf-8"> <title> anduly </titlejs </titlejs> <スクリプトタイプ= "text/javascript" src = "./ 1.5.3/angular.min.js ng-controller = "myController"> <div> <div>親スコープ：<div> say：{{name}} <br>親の名前を変更します。 <div>分離スコープ（親スコープ{{{name}}}を使用していない）：<div分離指向名= "name"> </div> </div> </div> </body> <script type = "text/javascript"> var app = angular.module（ 'myapp'、[]）; app.Controller（ "myController"、function（$ scope）{$ scope.name = "hello world";}）。ディレクティブ（ "IsolatedDirective"、function（）{return {scope：{name： "@"}、Template： 'Say：{name}} ng-model = "name"> '}）; </script> </html>結果：ページの初期効果
アニメーション効果：
親の範囲のコンテンツが変更され、子スコープが同時に変化したことがわかります。サブスコープのコンテンツが変更されました。親の範囲のコンテンツには影響しません！
=ローカルスコープ属性
= Directive属性の値を使用して、ローカルスコープ属性と親スコープ属性名の間に双方向のバインディングを作成します。
つまり、双方向バインドプロパティが必要な場合、=を使用して外部プロパティを導入できます。親の範囲を変更するか、範囲内のプロパティを分離するかどうかにかかわらず、親の範囲と分離スコープは、双方向の関係であるため、同時にプロパティ値を更新します。
サンプルコード：
<！doctype html> <html lang = "zh" ng-app = "myapp"> <head> <head> <head> <heats charset = "utf-8"> <title> anduly </titlejs </titlejs> <スクリプトタイプ= "text/javascript" src = "./ 1.5.3/angular.min.js ng-controller = "mycontroller"> <div>親スコープ：<div> say：{{user.name}} <br>親の名前を変更します。 </div> </body> <script type = "text/javascript"> var app = angular.module（ 'myApp'、[]）; app.Controller（ "myController"、function（$ scope）{$ scope.userbase = {name： 'hello'、id：1};}）。ディレクティブ（ "IsolatedDirectiont"、function（）{return {scope：{user： "="}、Template： 'say：{user.name} <br> type = "buttom" value = "" ng-model = "user.name"/> '}}）</script> </html>効果：
親の範囲と子スコープのコンテンツが常に同じであることがわかります！
＆ローカルスコープ属性
この方法は、親の範囲のコンテキストで式を直接実行する方法を提供します。この式は機能になる可能性があります。
たとえば、ディレクティブを作成すると、ユーザーがボタンをクリックすると、ディレクティブがコントローラーに通知したい場合、コントローラーはディレクティブで何が起こっているのかわかりません。 Angularでイベントブロードキャストを使用してそれを行うことができますが、コントローラーにイベントリスニング方法を追加する必要があります。
最良の方法は、ディレクティブが親の範囲で関数を渡すことを有効にすることです。親の範囲に更新する必要がある指令にアクションがある場合、親スコープのコンテキストでコードまたは関数を実行できます。
次の例では、ディレクティブの親スコープの関数を実行します。
<！doctype html> <html lang = "zh" ng-app = "myapp"> <head> <head> <head> <heats charset = "utf-8"> <title> anduly </titlejs </titlejs> <スクリプトタイプ= "text/javascript" src = "./ 1.5.3/angular.min.js ng-controller = "mycontroller"> <div>親スコープ：<div> say：{{value}} </div> </div> <div>分離範囲：<隔離駆動アクション= "click（）"> </div> </div> </div> </body> <script = "text/javascript"> var app " App.Controller（ "myController"、function（$ scope）{$ scope.value = "hello world"; $ scope.click = function（）{$ scope.value = math.random（）;}）ディレクティブの親スコープ定義の方法 "ng-click =" action（） "/> '}}）</script> </html>効果：
指示には多くの内容がありますが、TransClude、Compline、Link、Controllerについて話しましょう。
8.トランスクルーダー
ディレクティブ内のコンテンツをテンプレートに置き換えたくない場合は、この値をtrueに設定できます。一般に、NGTRANSCLUDEディレクティブで使用する必要があります。例：テンプレート： "<div> Hello Every Every <Div-ng-Transclude> </div> </div>"、この時点で、命令内のコンテンツはNG-Transclude Divに組み込まれます。つまり、それは<div> hello Every <div>になります。これはコマンド内のコンテンツです</div> </div>。デフォルト値はfalseです。この構成オプションを使用すると、ディレクティブ要素に含まれるコンテンツを抽出し、指示テンプレートの特定の位置に配置できます。 TransCludeを有効にすると、ng-Transcludeを使用して翻訳されたコンテンツを配置する場所を示すことができます
<！doctype html> <html lang = "zh" ng-app = "myapp"> <head> <head> <head charset = "utf-8"> <title> andulaljs </titlejs </title> <script = "text/javascript" src = "./ 1.5.3/ang.min.jsリンク</li> <li> 2番目のリンク</li> </ul> </div> </body> <script = "text/javascript"> var app = angular.module（ 'myApp'、[]）; app.directive（ 'Sidebox'、function（）{return {restrict： 'ea'、scope：{title： '@'}、trans：true、Template： '<div>/ <div>/ <h2> {{title}} </ h2>/ <span ng-transclude>/ </ span> </script> </html>結果：
transclude：false、
命令がTransCludeパラメーターを使用する場合、コントローラーはデータモデルの変更を正常に監視できません。リンク関数で$ watchサービスを使用することをお勧めします。
9.コントローラー
文字列または関数にすることができます。
文字列の場合は、文字列をコントローラーの名前として使用して、アプリケーションに登録されているコントローラーのコンストラクターを見つけます。
angular.module（ 'myApp'、[]）.directive（ 'myDirectiont'、function（）{restrict： 'a'、// controller： 'somecontroller'}）//アプリケーションの他の場所は、index.html angular.module（ 'myapp、controller（' myapp、controller '）にindex.html angular.module（' myapp、controller '）に含まれる同じファイルまたは別のファイルになります。 $ attrs、$ transclude）{//コントローラーロジックはここに配置されています}）;また、命令内の匿名関数として定義することもできます。ここに任意のサービス（$ log、$タイムアウトなど）[html] [html] [html]ビューコードスライスangular.module（ 'myapp'、[]、[]）.directive（ 'mydirective'、cose（）{rentrict： 'a nemtrict：' a nectrict： 'a nectrict：' a nectrict（ 'mydirection'） $ transclude）{//コントローラーロジックはここに配置されています}}）;注入できる特別なサービス（パラメーター）もあります
（1）$スコープ、指令要素に関連付けられたスコープ
（2）$要素、現在の命令に対応する要素
（3）$ attrs、現在の要素の属性で構成されるオブジェクト
（4）$ transclude、埋め込みリンク関数、実際に要素のクローンとdomの動作に使用される機能を実行しました
注：再利用可能な動作を定義するために使用されない限り、ここでは一般的に推奨されません。
命令のコントローラーとリンク関数（後で説明する）は、交換できます。違いは、コントローラーが主に命令間で再利用できる動作を提供するために使用されることですが、リンクリンク関数は現在の内部命令の動作のみを定義でき、命令間で再利用できないことです。
<！doctype html> <html lang = "zh" ng-app = "myapp"> <head> <head> <head charset = "utf-8"> <title> andulaljsの紹介</title> <スクリプトタイプ= "text/javascript" src = "./ 1.5.3/ang.min.js"> </spript> < bingwen ~~~ </hello> </body> <script type = "text/javascript"> var app = angular.module（ 'myApp'、[]）; app.directive（ 'hello'、function（）{return {restrict： 'ea'、transclude：true、// trueコントローラーに設定する必要があることに注意してください（$ scope、$ element、$ attrs、$ transclude、$ log）{//ここでは、ここでは、$ transclude（clone）{'call.erement（' call.ement（ 'clorement）{' call.erement（ 'clone）を注入することができます。 $ arts.mycolor） </script> </html>出力結果：
そして、コンソールの下にみんなこんにちは出力されます
$ transclude（）を見てみましょう。ここでは、2つのパラメーターを使用できます。1つ目は$スコープ、スコープ、2つ目はパラメータークローンのコールバック関数です。そして、このクローンは実際には埋め込まれたコンテンツ（jQueryに包まれています）であり、多くのDOM操作を行うことができます。
その最も簡単な方法はです
<script> angular.module（ 'myApp'、[]）。ディレクティブ（ 'mysite'、function（）{return {restrict： 'ea'、transclude：true、controller：function（$ scope、$ element、$ attrs、$ log、$ log）{var a = $ transclude（）; // $ transclude（）; </script>注：$ TransCludeを使用すると、新しいスコープが生成されます。
デフォルトでは、$ transclude（）を簡単に使用している場合、デフォルトのスコープは$ transcludeによって生成されるスコープです。
ただし、$ transclude（$ scope、function（clone）{}）を使用する場合、スコープは指令の範囲です
その後、質問が再び来ます。親スコープを使用する場合はどうなりますか
$ scope。$親を使用できます
同様に、新しいスコープが必要な場合は、$ scope。$ parent.new（）を使用することもできます。
10.Controlleras
このオプションは、コントローラーのエイリアスを設定するために使用されます
過去には、この方法をよく使用してコードを記述しました。
angular.module（ "app"、[]）.controller（ "democontroller"、["$ scope"、function（$ scope）{$ scope.title = "angualr";}] <div ng-app = "app" ng-controller = "democontroller"> {{titleその後、AngularJS1.2が新しい構文砂糖をもたらしたので、このように書くことができます
Angular.module（ "app"、[]）.controller（ "democontroller"、[function（）{this.title = "angualr";}]）<div ng-app = "app" ng-controller = "democontroller as demo"> {{demo.title}}} </div> div> div>これをコマンドに書くこともできます
<script> angular.module（ 'myApp'、[]）。directive（ 'mysite'、function（）{return {restrict： 'ea'、transclude：true、controller： 'somecontroller'、controlleras： 'maincontroller' //... other Configuration};};}）; </script>11.require（文字列または配列）
文字列は、リンク関数の4番目のパラメーターとして使用される別の命令の名前を表します。特定の使用法を説明するための例を挙げることができます。今すぐ2つの指示を書く必要があるとします。リンクリンク関数には多くの重複方法があります（リンク関数については後で説明します）。現時点では、これらの繰り返しの方法を3番目の命令のコントローラーに記述できます（コントローラーは、指示間の再利用動作を提供するために上記で言及されています）。次に、これら2つの指示で、コントローラーフィールド（3番目の命令）を使用した命令が必要です。
最後に、リンクリンク関数の4番目のパラメーターを使用して、これらの重複方法を参照できます。
<！doctype html> <html ng-app = "myapp"> <head> <script src = "http://cdn.staticfile.org/angular.js/1.2.10/angular.min.js"> </script> </head> <ボディ> <inner-directive2> </inner-directive2> </outer-directive> <script> var app = angular.module（ 'myApp'、[]）; app.directive（ 'outourdirective'、function（）{return {scope：{}、restrict： 'ae'、controller：function（$ scope）{this.say = function（somedirective）{console.log（ 'got：' + somedirectiont.message）;};}};};};};};}; app.directive（ 'innerdirective'、function（）{return {scope：{}、restrict： 'ae'、require： '^outiourdirectiont'、link：function（scope、elem、attrs、controllerinstance）{scope.message = "hi、leifeng"; controllerinstance.say（scope）;};};};}; app.directive（ 'innerdirective2'、function（）{return {scope：{}、restrict： 'ae'、require： '^outerdirectiont'、link：function（scope、elem、attrs、controllerinstance）{scope.message = "hi、shushu"; controllerinstance.say（scope）;};};};}; </script> </body> </html>指示のinnerdirectiveおよび指示上のinnerdirect2上記の例では、指令外部拡張のコントローラーで定義された再利用方法。
さらに、命令のコントローラーが異なる命令間で通信するために使用されることがさらに説明されています。
さらに、要件のパラメーター値にプレフィックスを追加できます。これにより、検索コントローラーの動作が変更されます。
（1）接頭辞がなければ、命令はそれ自体で提供されるコントローラーで検索されます。コントローラーが見つからない場合、エラーがスローされます。
（2）？必要なコントローラーが現在の命令で見つからない場合、nullはリンク接続関数の4番目のパラメーターに渡されます
（3）^必要なコントローラーが現在の命令で見つからない場合、親要素のコントローラーが見つかります
（4）？^組み合わせ
12。Anguarの指導編集プロセス
最初にAngularJSライブラリをロードし、NG-APP指令を見つけて、アプリケーションの境界を見つけます。
ng-appで定義されたスコープに従って、コンパイルのために$コンパイルサービスを呼び出します。 AngularJSは、HTMLドキュメント全体を通過し、指示に従って指示の優先順位に従ってページに宣言された命令を処理します。 DOMは、命令で構成パラメーター（テンプレート、場所、トランスクルーダーなど）に従って変換され、テンプレート自体を変換するために各命令のコンパイル関数の実行を順序付け（コンパイル関数が命令に定義されている場合）実行を開始します。
注：ここのコンパイル関数は、上記の$コンパイルサービスとは異なるディレクティブで構成されています。各コンパイル関数が実行されると、リンク関数が返され、すべてのリンク関数が大きなリンク関数に結合されます。
次に、この大きなリンク関数は、主にデータバインディングのために実行され、DOMにリスナーを登録することでスコープ内のデータを動的に変更するか、$ WATTHを使用してスコープ内の変数をリッスンしてDOMを変更します。彼女が行うことは、コンパイルが上記の戻り値の後にすべてのリンク関数によって合成される大きなリンク関数とほぼ同じです。
したがって、指令では、コンパイルおよびリンクオプションは相互に排他的です。これら2つのオプションが同時に設定されている場合、コンパイルによって返される関数はリンク関数と見なされ、リンクオプション自体は無視されます。
13.コンパイル関数
関数コンパイル（Telement、Tattrs、TransClude）{...}
コンパイル関数は、テンプレートDOMを変更する必要がある状況を処理するために使用されます。ほとんどの命令ではテンプレートの変更は必要ないため、この関数は一般的に使用されていません。使用する必要がある例には、テンプレートを変更する必要があるngtrepeatが含まれ、ngviewではコンテンツを非同期にロードする必要があります。コンパイルされた関数は、次のパラメーターを受け入れます。
テレメント - テンプレート要素 - 指令が存在する要素。この要素とそのサブ要素を変形させることは安全です。
Tattrs -Template属性 - この要素の指令によって宣言されたすべての属性は、コンパイルされた関数で共有されます。
TransClude-埋め込みリンク関数（Scope、CloneLinkingFn）。
注：コンパイルされた関数のDOM変形以外の操作を実行しないでください。さらに重要なことは、DOMリスニングイベントの登録は、コンパイルされた関数ではなく、リンクされた関数で行う必要があります。
コンパイルされた関数は、オブジェクトまたは関数を返すことができます。
戻り関数 - コンパイルされた関数が存在しないときに構成オブジェクトのリンク属性を使用して登録されたリンク関数に相当します。
オブジェクトを返す - preまたはpost属性を介して関数を登録したオブジェクトを返します。以下のリンク前および臨時後の機能の説明を参照してください。
14。リンク関数
関数リンク（scope、iElement、iattrs、コントローラー）{...}
リンク関数は、DOMイベントの登録とDOMの更新を担当します。テンプレートがクローン化された後に実行され、ほとんどの命令ロジックコードが書かれている場所でもあります。
スコープ - ディレクティブが聞く必要があるスコープ。
iElement-インスタンス要素 - 指令が存在する要素。ポストリンク関数の要素の子要素を操作することは安全です。なぜなら、それらはすべてリンクされているからです。
IATTRS-インスタンス属性 - インスタンス属性、現在の要素で宣言された標準化された属性のリスト。これは、すべてのリンクされた関数間で共有されます。
コントローラー - コントローラーインスタンス、つまり、現在の命令によって要求されたDirect2内のコントローラー。例：controller：function（）{this.addstrength = function（）{}} direct2ディレクティブで、現在のディレクティブのリンク関数で、controller.addstrengthを介して呼び出すことができます。
リンク前の関数は、子要素がリンクされる前に実行されます。リンク関数がリンクする正しい要素を見つけることができない場合に、DOMを変形させるために使用することはできません。
リンク後の関数すべての要素がリンクされた後に実行されます。
説明：
コンパイルオプション自体は頻繁に使用されませんが、リンク関数は頻繁に使用されます。基本的に、リンクオプションを設定すると、実際にpostlink（）リンク関数を作成して、コンパイル（）関数がリンク関数を定義できるようにします。一般に、コンパイル関数が設定されている場合、命令とリアルタイムデータがDOMに配置される前にDOM操作を実行することを意味します。この関数のノードの追加と削除など、DOM操作を実行しても安全です。コンパイルとリンクのオプションは相互に排他的です。これら2つのオプションが同時に設定されている場合、コンパイルによって返される関数はリンク関数と見なされ、リンクオプション自体は無視されます。翻訳関数は、テンプレートDOMの変換に責任があります。リンク関数は、スコープとDOMをリンクする責任があります。スコープがDOMにリンクされる前に、DOMを手動で操作できます。実際には、この種の操作はカスタム命令を書くときは非常にまれですが、そのような機能を提供するいくつかの組み込みの指示があります。リンク関数はオプションです。コンパイルされた関数が定義されている場合、リンクされた関数を返します。したがって、両方の関数が定義されると、コンパイルされた関数はリンク関数に過負荷になります。指示が単純で、追加の設定が必要ない場合は、工場関数（コールバック関数）から関数を返してオブジェクトを置き換えることができます。これが行われた場合、この関数はリンク関数です。
この記事には、http：//blog.csdn.net/evankakaが再現されています
上記は、AngularJS：指令の使用のコンテンツ全体です。すべての人の学習に役立つことを願っています。