AngularJS ディレクティブによって返されるオブジェクト プロパティの詳細な説明_AngularJS

前に書いた: ディレクティブ部分はangularjsにおいて最優先される部分なので、複数の章に分けて説明します。この章では主に、ディレクティブ

によって返されるオブジェクトのより単純な属性について説明します。

Directive() は angularjs で命令を定義するために使用されます。このメソッドは 2 つのパラメーターを受け取ります: name (命令の名前)、factory_function (この関数は命令のすべての動作を定義し、オブジェクトを返します)

栗:

//index.js
angular.module('myApp',[]);
myApp.directive('myDirective',function() {return {};});

返されたオブジェクトには、次のプロパティとメソッドが含まれます:

1: 制限: 文字列

この属性は、myDirective ディレクティブが DOM 内で宣言される形式 (つまり、HTML 内で使用される場所) を記述するために使用されます。
この属性のオプションの値は、E (要素)、A (属性、デフォルト値)、C (クラス名)、M (コメント) で、単独または組み合わせて使用​​できます
独立したコマンド機能をカスタマイズしたい場合、つまり、コマンドが他の要素や属性などに依存せずに一連の操作を独立して完了できる場合は、必要に応じてコマンドを要素として定義します。このコマンドを使用するには 既存のディレクティブの機能を拡張するには、それを属性として定義します。この理解が妥当かどうかは分かりませんが、確かに参考になる良い選定方法の基準です

2: 優先度: 番号

この属性は命令の優先順位を定義するために使用されます (デフォルトは 0、ngRepeat はすべての組み込み命令の中で最も高い優先順位を持ち、1000 です)。優先順位の高い命令が最初に実行されます。

3: ターミナル: ブール値

この属性は、現在の要素でこの命令よりも低い優先順位の命令の実行を停止するかどうかを決定するために使用されますが、同じ優先順位が引き続き実行されます。
栗:

//index.js
angular.module('myApp',[])
.directive('myDirective',function() {
  return {
    restrict: 'AE',
    priority: 1,
    template: '<div>hello world</div>'
  };
})
.directive('myDirective1',function() {
  return {
    restrict: 'AE',
    priority: 3,
    terminal: true
  };
})

<!-- index.html -->
<div my-directive my-directive1></div>

myDirective1 ディレクティブが定義されていない場合、ブラウザーには hello world が表示されますが、myDirective1 ディレクティブを追加し、その優先順位を myDirective より大きく設定し、myDirective1 の端末属性を true に設定すると、ブラウザーの実行が停止します。 myDirective ディレクティブ。

4: テンプレート: 文字列/関数

この属性はテンプレートを定義します (つまり、HTML ファイル内でこの命令を使用する部分がテンプレートのコンテンツを置き換えるため、テンプレートは主に HTML 形式になります)
属性には 2 つの形式があります。1 つは HTML テキスト、もう 1 つはテンプレート文字列を返す関数で、この関数は 2 つのパラメーターを受け取ります: tElement、tAttrs

5: templateUrl: 文字列/関数

テンプレート コンテンツが多数ある場合、テンプレートに直接ネストすると冗長に見えます。この場合は、TemplateUrl を使用してファイルをインポートする必要があります。 🎜> 属性には 2 つの形式もあります。外部 HTML ファイルのパスを表す文字列と、外部 HTML ファイルへのパスの文字列を返す関数です。この関数は 2 つのパラメータを受け取ります: tElement、tAttrs
。

6: 置換: ブール値

この属性のデフォルト値は false で、このディレクティブを呼び出す要素にテンプレートを子要素として挿入するか、このディレクティブを呼び出す要素を上書きして置換するかを示します。

栗:

//index.js
angular.module('myApp',[])
.directive('myDirective',function() {
  return {
    restrict: 'A',
    template: '<div>hello world</div>',
    replace: true/false
  };  
}) 

 <!-- index.html -->
<my-directive></my-directive>

repalce が false の場合、ブラウザのソース コードは

hello world

としてレンダリングされます

true の場合、

hello world

として表示されます。

7: transclude: ブール値

栗:

<!-- index.html -->
<div my-directive>world</div>

この例のように、命令内にコンテンツがある場合、通常、テンプレートはコンテンツを直接上書きして置き換えますが、ここではそれを保持したいので、transclude が役に立ちます。

//index.js
angular.module('myApp',[])
.dirctive('myDirective',function() {
  return {
    restrict: 'EA', 
    transclude: true,
    template: '<div>hello <span ng-transclude></span></div>'
  };
})

上記の js コードは、HTML ファイル ディレクティブに含まれるワールドをテンプレートの spam 要素に埋め込みます。span 要素は ng-transclude 組み込みディレクティブ属性を追加することに注意してください (これは非常に重要です)

つまり、この属性の目的は、ng-transclude ディレクティブが見つかった DOM 要素から取得したコンテンツを配置するように angularjs コンパイラーに指示することです。
以上がこの記事の全内容となりますが、皆様の学習のお役に立てれば幸いです。