web-dev-qa-db-ja.com

ng-transcludeとは何ですか？

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

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

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

これはかなり紛らわしいです。 ng-transcludeが何をしようとしているのか、そしてそれがどこで使われるのかを簡単な言葉で説明できる人はいますか？

angularjsangularjs-directivetransclusion
251
Code Whisperer

Transcludeは、マークアップのディレクティブの内側にあるすべてのものをキャプチャしてどこかで使用するようにAngularに指示するための設定です。（実際にはng-transcludeはにあります） ディレクティブのテンプレート内。これについて詳しくは、他の要素をラップするディレクティブの作成セクション ディレクティブのドキュメント を参照してください。

カスタムディレクティブを書く場合は、ディレクティブテンプレートで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

enter image description here

視覚化する：

enter image description here

472
The Q CS or GS

これは一種の収量です。element.html（）からのものはすべてそこにレンダリングされますが、ディレクティブ属性はまだ特定のスコープ内で可視です。

2
Sîrbu Nicolae-Cezar