ng-transcludeとは何ですか？

266

StackOverflowでng-transcludeについて議論する多くの質問を見てきましたが、それが何であるかを素人の言葉で説明するものはありません。

ドキュメントの説明は次のとおりです。

トランスクルージョンを使用する最も近い親ディレクティブの隠されたDOMの挿入ポイントをマークするディレクティブ。

これはかなり混乱します。誰かが簡単な言葉でng-transcludeが何をするつもりで、どこでそれが使われるのかを説明できるでしょうか？

angularjs angularjs-directive transclusion

— コードウィスパー
ソース

これは基本的に、特定のhtmlタグまたはディレクティブに挿入するもののマークポイントです。ディレクティブと一緒に使用すると、理解が深まります。

— za 14

回答:

492

Transcludeは、マークアップ内のディレクティブ内に配置されたすべてのものをキャプチャし、ディレクティブのテンプレートのどこか_{（実際にng-transcludeはどこにある}か_）で使用するようにangularに指示する設定です。詳細については、ディレクティブのドキュメントの「他の要素をラップするディレクティブの作成」セクションをご覧ください。

カスタムディレクティブを作成する場合は、ディレクティブテンプレートでng-transcludeを使用して、要素のコンテンツを挿入する場所をマークします

angular.module('app', [])
  .directive('hero', function () {
    return {
      restrict: 'E',
      transclude: true,
      scope: { name:'@' },
      template: '<div>' +
                  '<div>{{name}}</div><br>' +
                  '<div ng-transclude></div>' +
                '</div>'
    };
  });

これをマークアップに入れると

<hero name="superman">Stuff inside the custom directive</hero>

それは次のように表示されます：

スーパーマン

カスタムディレクティブの内部

完全な例：

Index.html

<body ng-app="myApp">
  <div class="AAA">
   <hero name="superman">Stuff inside the custom directive</hero>
</div>
</body>

jscript.js

angular.module('myApp', []).directive('hero', function () {
    return {
      restrict: 'E',
      transclude: true,
      scope: { name:'@' },
      template: '<div>' +
                  '<div>{{name}}</div><br>' +
                  '<div ng-transclude></div>' +
                '</div>'
    };
  });

Output markup

視覚化：

— ベン・フィッシャー
ソース

これは公式ドキュメントよりもはるかに優れた説明です。それは私の頭を傷つけます。

— Capaj 2015年

正解です。:)あなたが共有したリンクは私がのプロセスを理解するのに役立ちますtransclude。

— Paulo Oliveira

Angularは現在持っているドキュメントの代わりにこの説明を使うべきです。

— ジェレミーW

@codeofnodeその角度のコンパイルサービスは、ここに関連するコードですgithub.com/angular/angular.js/blob/...は

— ベン・フィッシャー

Stackoverflowの回答は、角度の概念を理解するための最良の方法

— です

それは一種の収量であり、element.html（）からのすべてがそこでレンダリングされますが、ディレクティブ属性は特定のスコープで引き続き表示されます。

— サーブニコラエセザール
ソース

私が考慮している一番上の答えは完璧ですが、ルビーのバックグラウンドから来ているのであれば、私も同意しyieldます。

— Apie 2015年

いや@Apie、私はルビーの背景から来る

— SIRBUニコラエ・セザール