[解決済み] Angularでtransclude 'true'とtransclude 'element'を使用するタイミングは？

質問

を使用する必要があります。 transclude: 'true' と transclude: 'element' ? について何も見つかりません。 transclude: 'element' は、angularのドキュメントで、かなり混乱しています。

どなたかわかりやすく解説していただけると幸いです。 各オプションの利点は何ですか？両者の本当の違いは何でしょうか？

これは、私が見つけたものです。

transclude: true

コンパイル関数の内部では、transclude リンク関数の助けを借りて DOM を操作したり、任意の HTML タグで ngTransclude ディレクティブを使用してトランスコードされた DOM をテンプレートに挿入したりすることができます。

そして

transclude: ‘element’

これは要素全体をトランスコードするもので、コンパイル関数の中にトランスクルードリンク関数が導入されています。ここではまだスコープが作成されていないため、スコープにアクセスすることはできません。コンパイル関数は、スコープにアクセスできるディレクティブのリンク関数を作成し、transcludeFnは、DOM操作のために（トランスコードされた）クローン要素を触ったり、その中のスコープにバインドされたデータを利用することができるようにします。ちなみに、これはng-repeatとng-switchで使われています。

どのように解決するのですか？

から ディレクティブに関するAngularJSのドキュメント :

transclude - 要素の内容をコンパイルし、ディレクティブが使用できるようにします。一般的に ngTransclude と共に使用されます。トランスクルードの利点は、リンク関数が正しいスコープにあらかじめバインドされているトランスクルード関数を受け取ることです。典型的な設定では、ウィジェットはアイソレートスコープを作成しますが、トランスクルードは子ではなく、アイソレートスコープの兄弟になります。これにより、ウィジェットがプライベートな状態を持ち、トランスクルージョンが親（分離前の）スコープにバインドされることが可能になります。

true - ディレクティブの内容を転記する。

'element' - より低い優先度で定義されたディレクティブを含む、要素全体を転置します。

transclude: 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 ディレクティブを使用すると、これを行うことができます。