Kapan menggunakan transclude 'true' dan transclude 'element' di Angular?

Kapan saya harus menggunakan transclude: 'true'dan kapan transclude: 'element'? Saya tidak dapat menemukan apa pun transclude: 'element'di dokumen sudut, mereka cukup membingungkan.

Saya akan senang jika seseorang dapat menjelaskan ini dalam bahasa yang sederhana. Apa manfaat dari setiap opsi? Apa perbedaan nyata di antara mereka?

Inilah yang saya temukan:

transclude: true

Di dalam fungsi kompilasi, Anda dapat memanipulasi DOM dengan bantuan fungsi tautan transclude atau Anda dapat memasukkan DOM yang ditransklusikan ke dalam template menggunakan arahan ngTransclude pada tag HTML apa pun.

dan

transclude: ‘element’

Ini transclude seluruh elemen dan fungsi menghubungkan transclude diperkenalkan dalam fungsi kompilasi. Anda tidak dapat memiliki akses ke ruang lingkup di sini karena ruang lingkup belum dibuat. Fungsi kompilasi membuat fungsi tautan untuk arahan yang memiliki akses ke cakupan dan transcludeFn memungkinkan Anda menyentuh elemen yang dikloning (yang ditransklusikan) untuk manipulasi DOM atau memanfaatkan data yang terikat dengan cakupan di dalamnya. Untuk informasi Anda, ini digunakan dalam ng-repeat dan ng-switch.

Dari Dokumentasi AngularJS tentang Arahan :

transclude- kompilasi konten elemen dan membuatnya tersedia untuk direktif. Biasanya digunakan dengan ngTransclude. Keuntungan transklusi adalah bahwa fungsi penautan menerima fungsi transklusi yang terikat sebelumnya dengan ruang lingkup yang benar. Dalam pengaturan tipikal, widget membuat ruang lingkup isolat, tetapi transklusi bukan anak-anak, tetapi saudara kandung ruang lingkup isolat. Ini memungkinkan widget memiliki status pribadi, dan transklusi terikat pada lingkup induk (pra-isolat).

true - transclude isi instruksi.

'element' - transclude seluruh elemen termasuk arahan yang didefinisikan dengan prioritas lebih rendah.

transclude: true

Jadi katakanlah Anda memiliki arahan yang disebut my-transclude-truedinyatakan dengan transclude: trueyang terlihat seperti ini:

<div>
  <my-transclude-true>
    <span>{{ something }}</span>
    {{ otherThing }}
  </my-transclude-true>
</div>

Setelah kompilasi dan sebelum menautkan ini menjadi:

<div>
  <my-transclude-true>
    <!-- transcluded -->
  </my-transclude-true>
</div>

The konten (anak-anak) dari my-transclude-trueyang <span>{{ something }}</span> {{..., ditransklusikan dan tersedia untuk direktif.

transclude: 'element'

Jika Anda memiliki arahan yang disebut my-transclude-elementdinyatakan dengan transclude: 'element'yang terlihat seperti ini:

<div>
  <my-transclude-element>
    <span>{{ something }}</span>
    {{ otherThing }}
  </my-transclude-element>
</div>

Setelah kompilasi dan sebelum menautkan ini menjadi:

<div>
   <!-- transcluded -->
</div>

Di sini, seluruh elemen termasuk anak-anaknya ditransklusikan dan tersedia untuk direktif.

Apa yang terjadi setelah menautkan?

Terserah arahan Anda untuk melakukan apa yang perlu dilakukan dengan fungsi transclude. ngRepeatmenggunakan transclude: 'element'sehingga dapat mengulangi seluruh elemen dan anak-anaknya ketika ruang lingkup berubah. Namun, jika Anda hanya perlu mengganti tag dan ingin mempertahankan isinya, Anda dapat menggunakan transclude: truedengan ngTranscludearahan yang melakukan ini untuk Anda.

Bila disetel ke true, arahan akan menghapus konten asli, tetapi membuatnya tersedia untuk dimasukkan kembali dalam template Anda melalui arahan yang disebut ng-transclude.

appModule.directive('directiveName', function() {
    return {
      template: '<div>Hello there <span ng-transclude></span></div>',
      transclude: true
    };
});


<div directive-name>world</div>

browser render: "Halo, dunia."

Cara berpikir terbaik tentang transklusi adalah Bingkai Foto. Bingkai foto memiliki desain sendiri dan ruang untuk menambahkan gambar. Kita dapat memutuskan gambar apa yang akan masuk ke dalamnya.

Ketika datang ke sudut kami memiliki beberapa jenis controller dengan ruang lingkup dan di dalamnya kami akan menempatkan arahan yang mendukung transklusi. Arahan ini akan memiliki tampilan dan fungsi sendiri. Dalam arahan non-transklusi, konten di dalam arahan diputuskan oleh arahan itu sendiri tetapi dengan transklusi, seperti halnya bingkai foto, kita dapat memutuskan apa yang akan ada di dalam arahan itu.

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


    }

});

Konten di dalam arahan

<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>

Panggil Directive

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

Contoh