Angularでtransclude 'true'とtransclude 'element'をいつ使用するのですか？

176

いつtransclude: 'true'、いつ使用すればよいtransclude: 'element'ですか？私transclude: 'element'は角度のドキュメントで何も見つけることができません、彼らはかなり混乱しています。

誰かが簡単な言葉でこれを説明できたら幸いです。各オプションのメリットは何ですか？それらの本当の違いは何ですか？

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

transclude: true
コンパイル関数内で、transcludeリンク関数を使用してDOMを操作したり、HTMLタグでngTranscludeディレクティブを使用して、変換されたDOMをテンプレートに挿入したりできます。

そして

transclude: ‘element’
これにより、要素全体がトランスクルードされ、トランスクルードリンク関数がコンパイル関数に導入されます。スコープがまだ作成されていないため、ここにスコープにアクセスできません。コンパイル関数は、スコープへのアクセス権を持つディレクティブのリンク関数を作成し、transcludeFnを使用すると、DOM操作のために複製された要素（トランスクルードされた要素）を操作したり、その要素のスコープにバインドされたデータを利用したりできます。参考までに、これはng-repeatおよびng-switchで使用されます。

angularjs angularjs-directive angularjs-ng-transclude

— LauroSkr
ソース

229

ディレクティブに関する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> {{...、トランクルードされ、ディレクティブで使用できます。

transclude： '要素'

次のように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これを行うディレクティブを使用できます。

— サーク
ソース

3

私はちょっとmade available to the directive声明を逃した。要素は常にディレクティブで使用できます。これについて詳しく説明してもらえますか？

— モグラビ男13年

1

@guymograbiその文は、「正しいスコープに事前にバインドされた関数を介してディレクティブで利用できるようにされる」としてより意味をなすかもしれません。

— ミシェルティリー

1つのユニットは、transcludeが「要素」に等しいディレクティブをどのようにテストしますか？私は現在その問題に取り組んでいます。変換された後、要素にアクセスできないようです。

— チェスターリバス2015

33

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」

— アンドレディオン
ソース

23

これは、（の違いについてだったすべての質問に答えていないtransclude: trueとtransclude: element）

— ジャスパー

1

また興味深いのは、ブラウザDOMがディレクティブの後に持つタグであり、それが読み取るものではありません...

— kontur

8

トランスクルージョンについて考える最良の方法は、画像フレームです。画像フレームには独自のデザインと画像を追加するためのスペースがあり、どの画像をその中に入れるかを決定できます。

角度に関しては、そのスコープを持つある種のコントローラーがあり、その中にトランスクルージョンをサポートするディレクティブを配置します。このディレクティブには、独自の表示と機能があります。非トランスルーデッドディレクティブでは、ディレクティブ内のコンテンツはディレクティブ自体によって決定されますが、トランスクルージョンを使用すると、画像フレームのように、ディレクティブ内に何を含めるかを決定できます。

angular.module("app").directive('myFrame', function () {
    return {
        restrict: 'E',
        templateUrl:"frame.html",
        controller:function($scope){
          $scope.hidden=false;
          $scope.close=function(){
            $scope.hidden=true;

          }
        },
        transclude:true


    }

});

ディレクティブ内のコンテンツ

<div class="well" style="width:350px;" ng-hide="hidden">

  <div style="float:right;margin-top:-15px">
    <i class="glyphicon glyphicon-remove" ng-click="close()" style="cursor:pointer"></i> 
  </div>
  <div ng-transclude>
    /*frame content goes here*/
  </div>
</div>

コールディレクティブ

<body ng-controller="appController">
    <my-frame>
      <span>My Frame content</span>
    </my-frame>
  </body>

例

— Code-EZ
ソース

それでも私はトランスクルードを理解していませんでした、これを説明する簡単なプログラムはありますか？

— Raja