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?

angularjs angularjs-directive transclusion

— Pembisik kode
sumber

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

Visualisasikan:

— Ben Fischer
sumber

Deskripsi ini jauh lebih baik, daripada dokumen resmi mereka. Yang itu membuat kepala saya sakit.

— Capaj

Jawaban bagus! :) Tautan yang Anda bagikan membantu saya memahami proses transclude.

— Paulo Oliveira

Angular harus menggunakan penjelasan ini sebagai ganti dari dokumen yang mereka miliki saat ini.

— Jeremy W

@codeofnode layanan kompilasi sudutnya, inilah kode yang relevan github.com/angular/angular.js/blob/…

— Ben Fischer

Jawaban Stackoverflow adalah cara terbaik untuk menurunkan konsep sudut

— sridhar ..

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

— Sîrbu Nicolae-Cezar
sumber

Jawaban teratas yang menurut saya sempurna, tetapi jika Anda berasal dari latar belakang rubi maka saya setuju, yieldsepertinya analogi yang bagus.

— Apie

@Apie ya, saya berasal dari latar belakang ruby

— Sîrbu Nicolae-Cezar