Memahami opsi transclude definisi direktif?

Saya pikir ini adalah salah satu konsep yang paling sulit untuk saya pahami dengan arahan angularjs.

Dokumen dari http://docs.angularjs.org/guide/directive mengatakan:

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 isolasi, tetapi transklusi bukan anak-anak, tetapi saudara kandung dari ruang lingkup terisolasi. 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

Dikatakan transcludebiasanya digunakan dengan ngTransclude. Tetapi sampel dari dokumen ngTransclude tidak menggunakan ngTranscludearahan sama sekali.

Saya ingin beberapa contoh bagus untuk membantu saya memahami hal ini. Mengapa kita membutuhkannya? Apa yang dipecahkannya? Bagaimana cara menggunakannya?

Pertimbangkan arahan yang disebut myDirective dalam suatu elemen, dan elemen itu melampirkan beberapa konten lain, katakanlah:

<div my-directive>
    <button>some button</button>
    <a href="#">and a link</a>
</div>

Jika myDirective menggunakan templat, Anda akan melihat bahwa konten dari <div my-directive>akan digantikan oleh templat direktif Anda. Jadi memiliki:

app.directive('myDirective', function(){
    return{
        template: '<div class="something"> This is my directive content</div>'
    }
});

akan menghasilkan render ini:

<div class="something"> This is my directive content</div> 

Perhatikan bahwa konten elemen asli Anda <div my-directive> akan hilang (atau lebih baik dikatakan, diganti). Jadi, ucapkan selamat tinggal pada teman-teman ini:

<button>some button</button>
<a href="#">and a link</a>

Jadi, bagaimana jika Anda ingin menyimpan <button>...dan <a href>...dalam DOM? Anda akan membutuhkan sesuatu yang disebut transklusi. Konsepnya cukup sederhana: Sertakan konten dari satu tempat ke tempat lain . Jadi sekarang arahan Anda akan terlihat seperti ini:

app.directive('myDirective', function(){
    return{
        transclude: true,
        template: '<div class="something"> This is my directive content</div> <ng-transclude></ng-transclude>'
    }
});

Ini akan menghasilkan:

<div class="something"> This is my directive content
    <button>some button</button>
    <a href="#">and a link</a>
</div>. 

Kesimpulannya, Anda pada dasarnya menggunakan transclude ketika Anda ingin mempertahankan konten suatu elemen saat Anda menggunakan arahan.

Contoh kode saya ada di sini . Anda juga bisa mendapat manfaat dari menonton ini .

Saya pikir penting untuk menyebutkan perubahan perilaku di atas dalam versi baru AngularJS. Saya menghabiskan satu jam mencoba untuk mencapai hasil di atas dengan Angular 1.2.10.

Isi elemen dengan ng-transclude tidak ditambahkan tetapi diganti sepenuhnya.

Jadi dalam contoh di atas, apa yang akan Anda capai dengan 'transclude' adalah:

<div class="something">
    <button>some button</button>
    <a href="#">and a link</a>
</div>

dan tidak

<div class="something"> This is my directive content
    <button>some button</button>
    <a href="#">and a link</a>
</div>

Terima kasih.

Apa yang dikatakan oleh TechExplorer adalah benar tetapi Anda dapat memiliki kedua konten tersebut dengan memasukkan tag wadah sederhana (seperti div atau span) ke dalam template Anda dengan atribut ng-transclude. Ini berarti bahwa kode berikut dalam templat Anda harus mencakup semua konten

<div class="something"> This is my directive content <div class="something" ng-transclude></div></div>

Dari Wiki:

"Dalam ilmu komputer, transklusi adalah penyertaan sebagian atau seluruh dokumen elektronik ke dalam satu atau lebih dokumen lain dengan referensi."

Saya ingin menambahkan penggunaan lain untuk transklusi, dan itu adalah bahwa ia mengubah urutan eksekusi dari kompilasi dan fungsi tautan dari arahan orang tua dan anak. Ini dapat berguna ketika Anda ingin mengkompilasi DOM anak sebelum DOM induk karena DOM induk mungkin tergantung pada DOM anak. Artikel ini lebih mendalam dan mengklarifikasi dengan sangat baik!

http://www.jvandemo.com/the-nitty-gritty-of-compile-and-link-functions-inside-angularjs-directives-part-2-transclusion/

The AngularJS Diperbarui 1.6.6 dokumentasi sekarang memiliki penjelasan yang lebih baik.

Transclude Digunakan untuk Membuat Arahan yang Membungkus Elemen Lain

Terkadang diinginkan untuk bisa lulus di seluruh templat daripada string atau objek. Katakanlah kita ingin membuat komponen "kotak dialog". Kotak dialog harus dapat membungkus konten yang sewenang-wenang.

Untuk melakukan ini, kita perlu menggunakan opsi transclude . Lihat contoh di bawah ini.

script.js

angular.module('docsTransclusionExample', [])
.controller('Controller', ['$scope', function($scope) {
  $scope.name = 'Tobias';
}])
.directive('myDialog', function() {
  return {
    restrict: 'E',
    transclude: true,
    scope: {},
    templateUrl: 'my-dialog.html',
    link: function(scope) {
      scope.name = 'Jeff';
    }
  };
});

index.html

<div ng-controller="Controller">
  <my-dialog>Check out the contents, {{name}}!</my-dialog>
</div>

my-dialog.html

<div class="alert" ng-transclude></div>

Output yang dikompilasi

<div ng-controller="Controller" class="ng-scope">
  <my-dialog class="ng-isolate-scope"><div class="alert" ng-transclude="">Check out the contents, Tobias!</div></my-dialog>
</div>

Transclude membuat isi arahan dengan opsi ini memiliki akses ke ruang lingkup di luar arahan daripada di dalam.

Ini diilustrasikan dalam contoh sebelumnya. Perhatikan bahwa kami telah menambahkan fungsi tautan di script.js yang mengubah nama sebagai Jeff. Biasanya, kita berharap bahwa {{name}} adalah Jeff. Namun, kita melihat dalam contoh ini bahwa ikatan {{name}} masih Tobias.

Praktik Terbaik : hanya digunakan transclude: trueketika Anda ingin membuat arahan yang membungkus konten sewenang-wenang.

transclude: true mean untuk menambahkan semua elemen yang didefinisikan dalam direktif Anda dengan elemen template dari direktif Anda.

jika transclude: false elemen-elemen ini tidak termasuk dalam html final direktif Anda, hanya template direktif yang dirender.

transclude: elemen berarti template direktif Anda tidak digunakan, hanya elemen yang didefinisikan dalam direktif Anda yang dirender sebagai html.

ketika Anda menentukan arahan Anda maka itu harus dibatasi ke E dan ketika Anda menambahkannya pada halaman itu

<my-directive><elements><my-directive>
<elements> is like <p>gratitude</p>
what i am talking about.