私の意見では、ディレクティブはAngularjsの宣言スタイルの主要なハイライトです。 ただし、 ディレクティブに特化した Angularjsの公式ドキュメントのセクションでユーザーのコメントを開くと、 最も人気のあるものは次のようになります。 初心者のAngularjs開発者がそれを理解するのは困難です」（「ディレクティブの明確に構成された明確なドキュメントを書き直してください。 これに異議を唱えるのは難しく、ドキュメントはまだ湿っていて、ある時点で機能のロジックと本質を理解するために多大な努力をしなければなりません。 したがって、この章が誰かの時間を節約することを期待して、この章の私の無料の言い直しを提供し、コメントへのあなたのサポートと参加も期待しています。 さあ、行こう！
パート1
- ディレクティブの書き方
- ディレクティブを作成する簡単な方法
- 拡張オプション
- リンクとコンパイル
テンプレートとTemplateUrl
ディレクティブの説明を続けると、Angularjsの用語を無視した場合、ディレクティブは本質的にモジュールであることに注意する必要があります。 つまり、理想的には、独自の機能とマークアップを備えた独立したインターフェイス要素である必要があります。 マークアップはTemplateパラメーターで直接指定するか、URLがTemplateUrlで指定される別のファイルに保存できます。
[ jsFiddle ]
angular.module('helloHabrahabr', []) .directive('habraHabr', function() { return { template:"<span>Hello Habr!</span>" /* */ templateUrl:"helloHabr.html" } });
helloHabr.html
<span>Hello Habr!</span>
この場合、テンプレートがロードされると、ロード後にコンパイルおよびリンク機能が実行されます。
コメントへの便利な追加
範囲
Scopeパラメーターは、ディレクティブ内のスコープを定義します。 いくつかのオプションが可能です。
スコープをまったく指定しないでください。 次に、大まかに言って、ディレクティブはコントローラーのスコープ内で直接動作します。 つまり、すべてのコントローラー変数はディレクティブ変数と同じです。
[ jsFiddle ]
<div ng-app="helloHabrahabr"> <div ng-controller="forExampleController"> {{hello}} <span habra-habr></span> </div> </div>
function forExampleController($scope){ $scope.hello="Hello Habr!"; } angular.module('helloHabrahabr', []) .directive('habraHabr', function() { return { template:"<input ng-model='hello'>{{hello}}" } });
別のオプション。 スコープ= true。 この場合、スコープは継承されます。 つまり、親スコープで指定されたフィールドもスコープディレクティブに表示されますが、すべての変更はローカルになります。
[ jsFiddle ]
function forExampleController($scope){ $scope.hello="Hello Habr!"; } angular.module('helloHabrahabr', []) .directive('habraHabr', function() { return { template:"<input ng-model='hello'>{{hello}}", scope:true } });
そして最後に、最も興味深いオプションです。 分離されたスコープを設定します。 つまり、スコープは、デフォルトではディレクティブ呼び出しのコンテキストから完全に独立しています。 これを行うには、空のオブジェクト{}をスコープとして指定するだけです：
[ jsFiddle ]
angular.module('helloHabrahabr', []) .directive('habraHabr', function() { return { template:"<input ng-model='hello'>{{hello}}", scope:{ } } });
このような分離されたスコープを操作するためのいくつかのオプションがあります。 しかし、それらはすべて1つの原則に基づいています。 スコープ用に宣言したオブジェクトでは、ディレクティブの変数は左側のプロパティ名として示され、右側は@ / = /＆の3文字のいずれかを持つDOM属性の名前です。 つまり、このように：
scope:{ localVar1:"@attrName1", localVar2:"=attrName2", localVar3:"&attrName3" }
またはもう1つのオプション。 属性名を指定しないでください。属性名は変数名と同じになります。
scope:{ localVar1:"@", /*localVar1:"@localVar1" */ localVar2:"=", /*localVar2:"@localVar2" */ localVar3:"&" /*localVar3:"@localVar3" */ }
順番に。 接頭辞「@」は、属性値がローカル変数に割り当てられることを意味します。
[ jsFiddle ]
<div ng-app="helloHabrahabr"> <span habra-habr="hello" some-attr="Hello Habr!"></span> </div>
angular.module('helloHabrahabr', []) .directive('habraHabr', function() { return { template:"{{hello}}", scope:{ hello:'@someAttr' } } });
接頭辞「=」は、属性で文字列が渡されないことを意味しますが、現在のスコープ内の変数の名前です。 そして、ローカル変数はそれに直接関係します。 つまり、ディレクティブの内部と外部の両方の変数への変更は、そことそこの両方に反映されます。
[ jsFiddle ]
<div ng-app="helloHabrahabr"> <div ng-controller="forExampleController"> {{hello}} <span habra-habr some-attr="hello"></span> </div> </div>
function forExampleController($scope){ $scope.hello="Hello Habr!"; } angular.module('helloHabrahabr', []) .directive('habraHabr', function() { return { template:"<input ng-model='hello'>{{hello}}", scope:{ hello:'=someAttr' } } });
最後に、＆の最終バージョンは、属性に式が含まれることを示唆しています。 たとえば、「c = a + b」または単に「a + b」です。 そして今、あなたのローカル変数は、パラメータを渡すことができる関数になります。 パラメーターは、キーが関数内の変数の名前であるオブジェクトに渡されます。 特定の場合、localVar（{a：1、b：2}）は3を返します。
[ jsFiddle ]
angular.module('helloHabrahabr', []) .directive('habraHabr', function() { return { template:"{{helloFn({a:1,b:2})}}", scope:{ helloFn:'&someAttr' } } });
興味深いことに、ローカル関数にパラメーターを渡さない場合、変数には親スコープの対応する変数の値が割り当てられます。 また、結果変数を指定すると、外部からも使用できるようになります。
[ jsFiddle ]
<div ng-app="helloHabrahabr"> <div ng-controller="forExampleController"> a={{a}} b={{b}} parent's hello={{hello}} <span habra-habr some-attr="hello= a+b"></span> </div> </div>
function forExampleController($scope){ $scope.a="Hello"; $scope.b=" Habr!"; } angular.module('helloHabrahabr', []) .directive('habraHabr', function() { return { template:"default helloFn={{helloFn()}}\ custom hello={{helloFn({a:'Bye',b:'Habr'})}}", scope:{ helloFn:'&someAttr' } } });
続けてくれてありがとう。