指示のために、それらは特定のDOM要素で実行される関数として単純に理解でき、命令はこの要素の関数を拡張できます。
まず、完全なパラメーターの例を見てから、各パラメーターの関数と使用法を詳細に紹介しましょう。
angular.module('myApp', []) .directive('myDirective', function() { return { restrict: String, priority: Number, terminal: Boolean, template: String or Template Function: function(tElement, tAttrs) {...}, templateUrl: String, replace: Boolean or String, scope: Boolean or Object, transclude: Boolean, controller: String or関数（スコープ、要素、属性、トランスクルード、その他のインジェクターブル）{...}、controlleras：string、requid：string、link：function（scope、ielement、iattrs）{...}、コンパイル：//以下に示すようにオブジェクトまたは接続機能を返す：機能（テレメント、tattrs、transclude）{return {pre：fenction（scope、ielment、lectrer、投稿：function（scope、iElement、iattrs、コントローラー）{...}} return function postlink（...）{...}}）;[文字列]を制限する
制限はオプションのパラメーターです。 DOMで宣言されている命令の形式で指定するために使用されます。デフォルト値はaです。つまり、属性の形式で宣言されます。
オプションの値は次のとおりです。
E（要素）
<my-directive> </my-directive>
A（プロパティ、デフォルト値）
<div my-directive = "expression"> </div>
C（クラス名）
<div> </div>
M（注）
< - 指令：my-directive Expression->
一般に、ブラウザの互換性を考慮すると、デフォルトの属性を属性の形式ですぐに宣言することを強くお勧めします。最後の方法は、必要でない場合に適格なインデックスを使用しないようにすることをお勧めします。
コード：
angular.module（ 'app'、[]）.directive（ 'mydirective'、function（）{return {restrict： 'e'、template： '<a href = "http://www.baidu.com"> baidu </a>'};}）効果：
優先度[int]
ほとんどの手順はこのパラメーターを無視し、デフォルト値0を使用しますが、一部のシナリオは非常に重要であるか、優先度が高いために必要です。たとえば、ngrepeatはこのパラメーターを1000に設定するため、同じ要素で他の命令の前に常に呼び出されることを保証できます。
ターミナル[ブール]
このパラメーターは、この命令よりも優先度が低い現在の要素の命令の実行を停止するために使用されます。ただし、現在の命令と同じ優先順位を持つ命令はまだ実行されます。
たとえば、NGIFの優先順位はNGVIEWよりもわずかに高い（実際には端子パラメーターです）。 NGIFの式値が真である場合、NGVIEWは正常に実行できますが、NGIF式の値が偽の場合、NGViewの優先度が低いためにNGVIEWは実行されません。
テンプレート[文字列または関数]
テンプレートパラメーターはオプションであり、次の2つのフォームのいずれかに設定する必要があります。
HTMLテキストの一部。
2つのパラメーターを受け入れることができる関数、パラメーターはTelementとTattrsであり、テンプレートを表す文字列を返します。 TELEMENTおよびTATTRSのtは、インスタンスと比較してテンプレートを表します。
まず、2番目の使用法を示しましょう。
angular.module（ 'app'、[]）.directive（ 'mydirective'、function（）{return {restrict： 'eac'、template：function（elem、attr）{return "<a href = '" + attr.value + "'>" + attex.text + "</a>";};};};};htmlcode ：（効果は上記と同じで、デモンストレーションは行われません）
<my-directive value = "http://www.baidu.com" text = "baidu"> </my-directive> <div my-directive value = "http://www.baidu.com" text = "baidu"> </div>
templateurl [文字列または関数]
TemplateUrlはオプションのパラメーターであり、次のタイプです。
外部HTMLファイルのパスを表す文字列。
2つのパラメーターを受け入れることができる関数、パラメーターはTelementとTattrsであり、外部HTMLファイルのパスで文字列を返します。
いずれにせよ、テンプレートのURLは、NGの組み込みセキュリティレイヤー、特に$ get strustedResourceUrlに渡されます。デフォルトでは、ディレクティブを呼び出すと、HTMLテンプレートファイルがバックグラウンドのAJAXを介して要求されます。多数のテンプレートをロードすると、クライアントアプリケーションが大幅に遅くなります。遅延を回避するために、アプリケーションを展開する前にHTMLテンプレートをキャッシュできます。
コード：
Angular.module（ 'app'、[]）.directive（ 'mydirective'、function（）{return {restrict： 'aec'、templateurl：function（elem、attr）{return attr.value + ".html"; //もちろんここでは、パスを直接指定できます。[bool]を交換する
交換はオプションのパラメーターです。このパラメーターが設定されている場合、デフォルト値がfalseであるため、値は真でなければなりません。デフォルト値は、この指令を子要素として呼ぶ要素にテンプレートが挿入されることを意味します。
たとえば、上記の例のデフォルト値では、生成されたHTMLコードは次のとおりです。
<my-directive value = "http://www.baidu.com" text = "baidu"> <a href = "http://www.baidu.com"> baidu </a> </my-directive>
交換= trueが設定されている場合
<a href = "http://www.baidu.com" value = "http://www.baidu.com" text = "baidu"> baidu </a>
私の観察によると、この効果は、= "e"を制限する場合にのみ実際の効果を示します。
基本的な命令パラメーターを導入した後、より重要な範囲パラメーターが関係しています...
スコープパラメーター[boolまたはobject]
スコープパラメーターはオプションであり、trueまたはオブジェクトに設定できます。デフォルト値はfalseです。
要素の複数の指令が分離範囲を使用する場合、そのうちの1つだけが有効になります。ディレクティブテンプレートのルート要素のみが新しいスコープを取得できます。したがって、これらのオブジェクトのデフォルトではスコープがTRUEに設定されます。組み込みのディレクティブNGコントローラーの機能は、親の範囲から継承し、新しい子供の範囲を作成することです。親の範囲から継承された新しい子スコープを作成します。ここでの継承は詳細に説明されておらず、基本的にはオブジェクト指向の継承と同じです。
まず、コードを分析しましょう。
<div ng-app = "app" ng-init = "name = 'grandfather'"> <div ng-init = "name = '父'">第一世代：{{name}} <div ng-init = "name = 'son'" }} </div> </div> </div> </div> </div> </div>第一世代は父親として名前を初期化することがわかりましたが、第2世代と第三世代は実際には同じ範囲であるため、彼らの名前は実際にはオブジェクトであるため、これの効果は次のとおりです。
第一世代：父
第二世代：孫
第三世代：孫
コードを変更して、第3世代を分離し、効果を確認しています。
<div ng-app = "app" ng-init = "name = 'grandfather'"> <div ng-init = "name = 'father'">第一世代：{{name}} <div ng-init = "name = 'son'" ng-controller = "somecontroller">第2世代：{{name}} <div nginit = "'グランドソンng-controller = "SecondController">第3世代：{{name}} </div> </div> </div> </div> </div> angular.module（ 'app'、[]）.controller（ 'somecontroller'、function（$ scope）{}）.controller（ 'SecondController'、function（$ scope）{}）効果は次のとおりです。
第一世代：父
第二世代：息子
第三世代：孫
コードを変更した後、継承を見てみましょう。
<div ng-app = "app" ng-init = "name = 'grandfather'"> <div>第一世代：{{name}} <div ng-controller = "somecontroller">第2世代：{{name}} <div ng-controller = "secondcontroller">第三世代</div> </div>効果は次のとおりです。
第一世代：祖父のキス
第二世代：祖父のキス
第三世代：祖父のキス
外部プロトタイプからスコープを継承し、スコーププロパティをtrueに設定できる指令を作成したい場合、それは単に継承可能な隔離です。つまり、親の範囲に逆に影響することはできません。
別の例を見てみましょう。
angular.module（ 'myApp'、[]）.controller（ 'maincontroller'、function（$ scope）{}）.directive（ 'mydirectiont'、function（）{restrict： 'a'、scope：false、// {}への切り替え、真のテストの優先順位：100、テンプレート：{<div div> {{{{{{ut> fiv> myPropery ng-model = "myproperty"/> </div> '}）;HTMLコード：
<div ng-controller = 'maincontroller' ng-init = "myproperty = 'hello world！'"> external：{{myproperty}} <input ng-model = "myproperty"/> <my-directive> </div> </div>スコープ値を変更すると、見つかります
false：継承しますが、分離しません
True：継承して分離します
{}：隔離され、継承されていない
transclude
TransCludeはオプションのパラメーターです。デフォルト値はfalseです。埋め込みは、再利用可能なコンポーネントを作成するためによく使用されます。典型的な例は、モーダルダイアログボックスまたはナビゲーションバーです。そのテンプレート全体を含むすべてのテンプレートを、埋め込むことで1つの命令に渡すことができます。ディレクティブの内部は、外部ディレクティブの範囲にアクセスでき、テンプレートは外部スコープオブジェクトにもアクセスできます。スコープを渡すには、スコープパラメーターの値を設定して、{}またはtrueでスコープを分離する必要があります。スコープパラメーターが設定されていない場合、ディレクティブ内のスコープは、着信テンプレートのスコープに設定されます。
TransCludeを使用してください：TRUEは、コンテンツを含めることができるディレクティブを作成する場合のみです。
ナビゲーションバーの2つの例を見てみましょう。
<div side-box> <div> <a href = ""> graphics </a> <a href = ""> ng </a> <a href = ""> d3 </a> <a href = ""> front-end </a> <a href = "">起動</a> </div> </div>
jscode：
angular.module（ 'myApp'、[]）.directive（ 'sidebox'、function（）{return {restrict： 'ea'、scope：{title： '@'}、翻訳：true、テンプレート： '<div> <h2>' + ' +' {{title}} </h2> </span </div> }）;このコードは、NGコンパイラに、NG-Transcludeディレクティブを発見するDOM要素から取得したものを配置するように指示します。
公式ウェブサイトの例を見てみましょう。
angular.module（ 'docsisofnbindexample'、[]）.controller（ 'controller'、['$ scope'、 '$ timeout'、function（$ scope、$ timeout）{$ scope.name = 'tobias'; $ scope.hidedialog = function（）{$ scope.dialididididididididididididididididididid（ false; 2000）;my-dialog-close.html
my-dialog-close.html <div> <a href ng-click = "close（）">×</a> <div ng-transclude> </div> </div>
index.html
<div ng-controller = "controller"> <my-dialog ng-hide = "dialogishiddidmen" on-close = "hidedialog（）">コンテンツをチェックしてください、{{name}}！ </my-dialog> </div>命令がTransCludeパラメーターを使用する場合、コントローラーはデータモデルの変更を正常に監視できません。リンク関数で$ watchサービスを使用することをお勧めします。
コントローラー[文字列または関数]
コントローラーパラメーターは、文字列または関数にすることができます。文字列に設定すると、アプリケーションに登録されているコントローラーのコンストラクターが名前として文字列の値で見つかります。
angular.module（ 'myApp'、[]）.Directive（ 'myDirective'、function（）{restrict： 'a'、controller： 'somecontroller'}）インラインコントローラーは、命令内の匿名コンストラクターを介して定義できます。
angular.module（ 'myApp'、[]）.directive（ 'myDirective'、function（）{restrict： 'a'、controller：function（$ scope、$ element、$ attrs、$ transclude）{//コントローラーロジックはここに配置されています}）;コントローラーに注入できるNGサービスを挿入でき、指示で使用できます。コントローラーには、指示に注入できる特別なサービスもいくつかあります。これらのサービスには以下が含まれます。
1。$スコープ
指令要素に関連付けられた現在の範囲。
2。$要素
現在の命令に対応する要素。
3。$ attrs
現在の要素の属性で構成されるオブジェクト。
<div id = "adiv" class = "box"> </div>次の属性オブジェクトがあります：{id：adiv "、class：" box "}4。$ transclude
埋め込まれたリンク関数は、対応する埋め込みスコープでプリビングされます。 TransCludeリンク関数は、実際に要素をクローンしてDOMを動作させるように実行される関数です。
angular.module（ 'myApp'、[]）.directive（ 'mylink'、function（）{return {restrict： 'ea'、transclude：true、controller：function（$ scope、$ element、$ attrs、$ transclude）{$ transclude（function（clone）{var a = angulare）; a.text（clone.text（））; }）;;HTML
<my-link value = "http://www.baidu.com"> baidu </my-link>
<div my-link value = "http://www.google.com"> Google </div>
コンパイルパラメーターでのみTransCludeFNを使用することをお勧めします。リンク関数は互いに命令を分離できますが、コントローラーは再利用可能な動作を定義します。現在の命令のAPIを他の命令に公開する場合は、コントローラーパラメーターを使用できます。そうしないと、リンクを使用して、現在の命令要素（つまり、内部関数）の機能を構築できます。 scope。$ watch（）を使用する場合、またはdom要素とリアルタイムでやり取りする場合、リンクを使用するとより良い選択が可能です。埋め込まれていると、コントローラーのスコープに反映されるスコープは、予想されるものとは異なる場合があります。この場合、$スコープオブジェクトを正常に更新することを保証することはできません。現在の画面のスコープと対話する場合は、リンク関数に渡されたスコープパラメーターを使用できます。
Controlleras [String]
Controllerasパラメーターは、コントローラーのエイリアスを設定するために使用され、コントローラーを$スコープを注入せずにビューで参照できるようにします。
<div ng-controller = "maincontroller as main"> <input type = "text" ng-model = "main.name"/> <span> {{main.name}} </span> </div>jscode：
angular.module（ 'myApp'、[]）.controller（ 'maincontroller'、function（）{this.name = "halower";}）;コントローラーのエイリアスを使用すると、ルーティングと手順が匿名コントローラーを作成します。この機能は、コントローラーに動的オブジェクトを作成でき、オブジェクトは分離され、テストが簡単です。
[文字列または文字列[]]が必要です
要求は、別の命令の名前を表す文字列です。要求は、コントローラーを指定した命令に注入し、現在の命令のリンク関数の4番目のパラメーターとして機能します。文字列または配列要素の値は、現在の命令の範囲で使用される命令名です。いずれにせよ、NGコンパイラは、サブコントローラーを探すときに現在の命令のテンプレートを参照します。
コンパイル【オブジェクトまたは関数】
コンパイルオプション自体は頻繁に使用されませんが、リンク関数は頻繁に使用されます。基本的に、リンクオプションを設定すると、実際にpostlink（）リンク関数を作成して、コンパイル（）関数がリンク関数を定義できるようにします。通常、コンパイル関数が設定されている場合、命令とリアルタイムデータがDOMに配置される前にDOM操作を実行することを意味します。この関数のノードの追加と削除など、DOM操作を実行しても安全です。
コンパイルとリンクのオプションは相互に排他的です。これら2つのオプションが同時に設定されている場合、コンパイルによって返される関数はリンク関数と見なされ、リンクオプション自体は無視されます。
コンパイルされた関数は、テンプレートDOMの変換に責任があります。リンク関数は、スコープとDOMをリンクする責任があります。スコープがDOMにリンクされる前に、DOMを手動で操作できます。実際には、この種の操作はカスタム命令を書くときは非常にまれですが、そのような機能を提供するいくつかの組み込みの指示があります。
リンク
コンパイル：function（tele、tattrs、translatefn）{// todo：return function（scope、ele、attrs）{// link function};リンク関数はオプションです。コンパイルされた関数が定義されている場合、リンクされた関数を返します。したがって、両方の関数が定義されると、コンパイルされた関数はリンク関数に過負荷になります。指示が単純で、追加の設定が必要ない場合は、工場関数（コールバック関数）から関数を返してオブジェクトを置き換えることができます。これが行われた場合、この関数はリンク関数です。
ngmodel
コントローラー内のデータを処理するためのより基礎となるAPIを提供します。このAPIは、データのバインディング、検証、CSSアップデート、および実際にDOMを操作しない他のものを処理するために使用されます。 NGMODELコントローラーは、いくつかの方法を含むNGMODELとともに命令に注入されます。 ngmodelControllerにアクセスするには、要求設定を使用する必要があります。
ngmodelControllerが使用する一般的な要素は次のとおりです。
1。スコープ内のビュー値を設定するには、ngmodel。$ setViewValue（）関数を呼び出す必要があります。
$ setViewValue（）メソッドは、カスタムディレクティブ（コールバック関数を使用してjQueryプラグインを使用するなど）でカスタムイベントをリッスンするのに適しています。また、コールバックが呼び出されたときに$ ViewValueを設定してDigestループを実行します。
angular.module（ 'myApp'）.directive（ 'myDirectiont'、function（）{require： 'ngmodel'、link：function（scope、ele、attrs、ngmodel）{if（！ngmodel）return; scope（function）{ngmodel。 }}; }）; }}; }）; }; }）; }; }）; }; }）; }; }）; }; }）; }; }）; }; }）; }; }）; }; }）;2。$ renderメソッドは、ビューの特定のレンダリング方法を定義できます
3。プロパティ
1。 $ ViewValue
$ ViewValueプロパティは、ビューを更新するために必要な実際の文字列を保持します。
2。$ modelValue
$ ModelValueはデータモデルによって保持されます。 $ ModelValueと$ ViewValueは、$パーサーパイプラインが動作するかどうかによって異なる場合があります。
3。$パーサー
$パーサーの値は一連の関数であり、関数はパイプラインの形で1つずつ呼ばれます。 ngmodel domから読み取られた値は、$パーサーの関数に渡され、パーサーによって順番に処理されます。
4。$フォーマッタ
$フォーマッタの値は、データモデルの値が変更されたときにパイプラインの形で1つずつ呼ばれる関数の配列です。 $パーサーのパイプラインには影響しないため、この値がバインドされたコントロール内の表示に値をフォーマットおよび変換するために使用されます。
5。$ ViewChangelisteners
$ ViewChangelistenersの値は、ビューの値が変更されたときにパイプラインの形で1つずつ呼ばれる関数の配列です。 $ viewchangelistenersを使用すると、$ watchを使用せずに同様の動作を実現できます。返品値は無視されるため、これらの関数は値を返す必要はありません。
6。$エラー
$エラーオブジェクトは、検証と対応するエラー情報に合格していないバリデーター名を保持します。
7。$ PRISTINE
$ Pristineの値はブール値であり、ユーザーがコントロールを変更したかどうかを知ることができます。
8。$汚れ
$ dirtyの値は$ Pristineの反対であり、ユーザーがコントロールと対話したかどうかを知ることができます。
9。$有効
$有効な値は、現在のコントロールにエラーがあるかどうかを示します。エラーがある場合は値がfalseで、エラーがない場合は値が真です。
10。$無効
$ invalid値は、現在のコントロールに少なくとも1つのエラーがあるかどうかを示し、その値は有効な$の反対です。
上記は、Angularjsに関する指示と知識資料の編集です。後で追加し続けます。このサイトへのご支援ありがとうございます！