179

transclude: 'true'いつ、いつ使用する必要がありtransclude: 'element'ますか? angular docsについては何も見つかりませんtransclude: 'element'。かなり混乱しています。

どなたか簡単な言葉で説明していただけると幸いです。各オプションの利点は何ですか? それらの本当の違いは何ですか？

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

transclude: true

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

と

transclude: ‘element’

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

4

3 に答える 3

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.」</p>

于 2013-08-26T17:47:55.890 に答える
8

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

angular に関しては、スコープを備えたある種のコントローラーがあり、その中にトランスクルージョンをサポートするディレクティブを配置します。このディレクティブには、独自の表示と機能があります。非トランスリュード ディレクティブでは、ディレクティブ内のコンテンツはディレクティブ自体によって決定されますが、トランスクルージョンでは、ちょうど額縁のように、ディレクティブ内に何が含まれるかを決定できます。

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>

例

于 2016-08-30T20:59:13.187 に答える