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


176

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.

Jawaban:


229

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.


3
Saya agak merindukan made available to the directivepernyataan itu. Elemen selalu tersedia untuk direktif. bisakah Anda menjelaskan hal ini?
guy mograbi

1
@guymograbi Kalimat itu mungkin lebih masuk akal karena "tersedia untuk direktif melalui fungsi yang terikat sebelumnya dengan cakupan yang benar ."
Michelle Tilley

Bagaimana satu unit menguji arahan dengan transclude sama dengan 'elemen'? Saat ini saya sedang berjuang dengan masalah itu. Sepertinya saya tidak dapat mengakses elemen setelah ditransklusikan.
Chester Rivas

33

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


23
Ini tidak menjawab pertanyaan sama sekali (yang adalah tentang perbedaan antara transclude: truedan transclude: element)
Jasper

1
Yang juga menarik adalah tag apa yang dimiliki browser DOM setelah arahan, bukan apa yang dibaca ...
kontur

8

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.masukkan deskripsi gambar di sini

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


Masih saya tidak mengerti transclude, dapatkah Anda memiliki program sederhana untuk menggambarkan ini?
Raja
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.