いつ、いつ使用すればよいのでしょうtransclude: 'true'か? Angular のドキュメントでtransclude: 'element'は何も見つけられません。かなりわかりにくいです。transclude: 'element'
誰かがこれを簡単な言葉で説明してくれると嬉しいです。それぞれのオプションの利点は何ですか? それらの実際の違いは何ですか?
私が見つけたのは次のものです:
transclude: trueコンパイル関数内では、transclude リンク関数を使用して DOM を操作したり、任意の HTML タグで ngTransclude ディレクティブを使用して、transclude された DOM をテンプレートに挿入したりできます。
そして
transclude: ‘element’これは要素全体をトランスクルードし、コンパイル関数にトランスクルード リンク関数が導入されます。スコープはまだ作成されていないため、ここではスコープにアクセスできません。コンパイル関数は、スコープにアクセスできるディレクティブのリンク関数を作成し、transcludeFn を使用すると、クローンされた要素 (トランスクルードされた要素) を DOM 操作のために操作したり、その中のスコープにバインドされたデータを利用したりできます。参考までに、これは ng-repeat および ng-switch で使用されます。
ベストアンサー1
からディレクティブに関する AngularJS ドキュメント:
transclude- 要素のコンテンツをコンパイルし、ディレクティブで使用できるようにします。通常は ngTransclude で使用されます。トランスクルージョンの利点は、リンク関数が適切なスコープに事前にバインドされたトランスクルージョン関数を受け取ることです。一般的なセットアップでは、ウィジェットは分離スコープを作成しますが、トランスクルージョンは子ではなく、分離スコープの兄弟です。これにより、ウィジェットがプライベート状態を持ち、トランスクルージョンが親 (分離前の) スコープにバインドされるようになります。
true- 指令の内容を転載します。
'element'- より低い優先度で定義されたディレクティブを含む要素全体をトランスクルードします。
トランスクルード: true
たとえば、次のようなmy-transclude-true宣言されたディレクティブがあるとします。transclude: true
<div>
<my-transclude-true>
<span>{{ something }}</span>
{{ otherThing }}
</my-transclude-true>
</div>
コンパイル後、リンクする前に、次のようになります。
<div>
<my-transclude-true>
<!-- transcluded -->
</my-transclude-true>
</div>
のコンテンツ（子）は でmy-transclude-trueあり<span>{{ something }}</span> {{...、参照され、ディレクティブで使用できます。
包含: '要素'
次のようmy-transclude-elementに宣言されたディレクティブがある場合:transclude: 'element'
<div>
<my-transclude-element>
<span>{{ something }}</span>
{{ otherThing }}
</my-transclude-element>
</div>
コンパイル後、リンクする前に、次のようになります。
<div>
<!-- transcluded -->
</div>
ここでは、子要素を含む要素全体転載され、指令で利用できるようになります。
リンクすると何が起こりますか?
transclude 関数で必要な処理を実行するかどうかは、ディレクティブ次第です。ngRepeatを使用してtransclude: 'element'、スコープが変更されたときに要素全体とその子要素を繰り返すことができます。ただし、タグを置き換えるだけで、その内容を保持したい場合は、これを実行するディレクティブtransclude: trueを とともに使用できますngTransclude。