web-dev-qa-db-ja.com

Angularでtransclude「true」およびtransclude「element」を使用する場合

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

誰かがこれを簡単な言葉で説明できたら嬉しいです。各オプションの利点は何ですか？それらの本当の違いは何ですか？

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

transclude: true

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

そして

transclude: ‘element’

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

angularjsangularjs-directiveangularjs-ng-transclude
174
LauroSkr

ディレクティブに関する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> {{...のcontent（子）はトランスクルードされ、ディレクティブで利用可能です。

transclude： '要素'

my-transclude-elementという名前のディレクティブがtransclude: 'element'で宣言されている場合、次のようになります。

<div>
  <my-transclude-element>
    <span>{{ something }}</span>
    {{ otherThing }}
  </my-transclude-element>
</div>

コンパイル後、リンクする前に、これは次のようになります。

<div>
   <!-- transcluded -->
</div>

ここでは、子を含むwhole要素がトランスクルードされ、ディレクティブで使用可能になります。

リンクした後はどうなりますか？

それは、トランスクルード関数で必要なことを行うためのディレクティブ次第です。 ngRepeatはtransclude: 'element'を使用するため、スコープが変更されたときに要素全体とその子を繰り返すことができます。ただし、タグを置き換えるだけでその内容を保持する場合は、ngTranscludeディレクティブでtransclude: trueを使用して、これを行うことができます。

226
sirhc

Trueに設定すると、ディレクティブは元のコンテンツを削除しますが、ng-transcludeというディレクティブを使用してテンプレート内に再挿入できるようにします。

appModule.directive('directiveName', function() {
    return {
      template: '<div>Hello there <span ng-transclude></span></div>',
      transclude: true
    };
});


<div directive-name>world</div>

ブラウザのレンダリング：「Hello there world」。

32
user2680139