Apa itu ng-transclude?

266

Saya telah melihat sejumlah pertanyaan tentang StackOverflow membahas ng-transclude, tetapi tidak ada yang menjelaskan dalam istilah awam apa itu.

Deskripsi dalam dokumentasi adalah sebagai berikut:

Arahan yang menandai titik penyisipan untuk DOM yang ditransklusikan dari direktif induk terdekat yang menggunakan transklusi.

Ini cukup membingungkan. Apakah seseorang dapat menjelaskan secara sederhana apa yang dimaksud dengan ng-transclude dan di mana itu dapat digunakan?

Pembisik kode
sumber
1
pada dasarnya itu adalah titik penandaan untuk apa pun yang Anda masukkan untuk tag html atau arahan tertentu. gunakan dengan arahan dan Anda akan memahaminya dengan lebih baik.
za

Jawaban:

492

Transclude adalah pengaturan untuk memberitahu angular untuk menangkap semua yang dimasukkan ke dalam direktif dalam markup dan menggunakannya di suatu tempat (Di mana sebenarnya ng-transcludeadalah di) dalam template direktif. Baca lebih lanjut tentang ini di bawah Membuat Petunjuk yang Membungkus Bagian Elemen Lain tentang dokumentasi arahan .

Jika Anda menulis arahan khusus, Anda menggunakan ng-transclude dalam template direktif untuk menandai titik di mana Anda ingin memasukkan isi elemen

angular.module('app', [])
  .directive('hero', function () {
    return {
      restrict: 'E',
      transclude: true,
      scope: { name:'@' },
      template: '<div>' +
                  '<div>{{name}}</div><br>' +
                  '<div ng-transclude></div>' +
                '</div>'
    };
  });

Jika Anda menempatkan ini di markup Anda

<hero name="superman">Stuff inside the custom directive</hero>

Itu akan muncul seperti:

Superman

Hal-hal di dalam arahan khusus

Contoh lengkap:

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

masukkan deskripsi gambar di sini

Visualisasikan:

masukkan deskripsi gambar di sini

Ben Fischer
sumber
90
Deskripsi ini jauh lebih baik, daripada dokumen resmi mereka. Yang itu membuat kepala saya sakit.
Capaj
4
Jawaban bagus! :) Tautan yang Anda bagikan membantu saya memahami proses transclude.
Paulo Oliveira
10
Angular harus menggunakan penjelasan ini sebagai ganti dari dokumen yang mereka miliki saat ini.
Jeremy W
1
@codeofnode layanan kompilasi sudutnya, inilah kode yang relevan github.com/angular/angular.js/blob/…
Ben Fischer
1
Jawaban Stackoverflow adalah cara terbaik untuk menurunkan konsep sudut
sridhar ..
1

itu semacam hasil, semuanya dari element.html () akan ditampilkan di sana tetapi atribut arahan masih terlihat dalam cakupan tertentu.

Sîrbu Nicolae-Cezar
sumber
3
Jawaban teratas yang menurut saya sempurna, tetapi jika Anda berasal dari latar belakang rubi maka saya setuju, yieldsepertinya analogi yang bagus.
Apie
2
@Apie ya, saya berasal dari latar belakang ruby
Sîrbu Nicolae-Cezar