BinaryDevelop
  1. ホーム
  2. angularjs

[解決済み】ng-transcludeとは何ですか？

2022-04-16 12:56:15

質問

StackOverflowでng-transcludeに関する質問をいくつか見かけましたが、それが何であるかを平易な言葉で説明しているものはありませんでした。

ドキュメントでの説明は以下の通りです。

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

これはかなり紛らわしいですね。どなたか、ng-transclude が何を意図しているか、どこで使われそうかを簡単に説明していただけませんか？

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

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

ビジュアライズ:

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します