Memahami opsi transclude definisi direktif?


195

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?


FYI ... tautan berfungsi setidaknya sekarang
Sandy

Jawaban:


518

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 .


12
Sepertinya mereka telah mengubah fungsi sedikit. Paling tidak dalam versi> = 1.2.9. Konten dari template tidak ditambahkan ke konten yang diberikan. Lihat jawaban @ TechExplorer di bawah ini
Tarjei Romtveit

20
Jawaban yang sangat, sangat bagus. Jauh di atas normal. Anda memiliki contoh yang bagus, dan "ini adalah konten petunjuk saya" Anda membuatnya sangat mudah dibaca dalam versi yang diberikan. Saya tidak mengerti mengapa Angular harus menggunakan terminologi dan konsep yang kompleks dan kemudian tidak menyertakan contoh yang mudah dipahami seperti milik Anda. +2
gratis semua

Adakah yang tahu jika konten yang ditransklusikan dapat merujuk ke bidang lingkup isolasi direktif? Dikatakan di atas bahwa transklusi adalah saudara kandung, bukan anak kecil, dari ruang lingkup isolasi ... jadi saya berasumsi tidak bisa - tetapi bertanya-tanya apakah seseorang dapat mengkonfirmasi atau memberi tahu saya jika itu mungkin
Simon Green

@UladzimirHavenchyk terima kasih, mereka memindahkan videonya ke tempat lain. Saya memperbaiki tautannya.
odiseo

4
@odiseo, bisakah Anda menulis SEMUA dokumen Sudut dalam bahasa Inggris yang sederhana dan mudah dipahami seperti ini! + banyak 1.
Dan Hodson

76

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.


Untuk informasi lebih lanjut tentang perilaku yang berubah di Angular 1.2, lihat mengubah eed299a .
Mark Rajcok

37

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>

5
Itu adalah informasi kunci yang hilang pada jawaban lainnya
Matheus

4
Jawaban ini menambahkan begitu banyak informasi. ng-transcludeadalah atribut yang bertindak sebagai penampung, di mana konten yang ditransklusikan akan ditempatkan.
BeingSuman

5

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/


5

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.


0

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