Aku membenturkan kepalaku ke dinding pada ini selama beberapa hari, dan aku merasa sedikit lebih banyak penjelasan.
Pada dasarnya, dokumen menyebutkan bahwa pemisahan ini sebagian besar merupakan peningkatan kinerja. Saya akan menegaskan kembali bahwa fase kompilasi terutama digunakan ketika Anda perlu memodifikasi DOM SEBELUM sub-elemen itu sendiri dikompilasi.
Untuk tujuan kita, saya akan menekankan terminologi, yang sebaliknya membingungkan:
SERVICE kompiler ($ compile) adalah mekanisme sudut yang memproses DOM dan menjalankan berbagai bit kode dalam arahan.
FUNGSI kompilasi adalah satu bit kode dalam direktif, yang dijalankan pada waktu tertentu OLEH SERVICE kompiler ($ compile).
Beberapa catatan tentang kompilasi FUNGSI:
Anda tidak dapat mengubah elemen ROOT (yang mempengaruhi arahan Anda), karena sudah dikompilasi dari tingkat luar DOM (kompilasi SERVICE telah dipindai untuk arahan pada elemen itu).
Jika Anda ingin menambahkan arahan lain ke elemen (bersarang), Anda dapat:
Harus menambahkannya selama fase kompilasi.
Harus menyuntikkan layanan kompilasi ke dalam fase penautan dan mengkompilasi elemen secara manual. TETAPI, waspadalah dalam mengkompilasi sesuatu dua kali!
Juga bermanfaat untuk melihat bagaimana panggilan bersarang dan eksplisit ke $ compile berfungsi, jadi saya telah membuat taman bermain untuk melihatnya di http://jsbin.com/imUPAMoV/1/edit . Pada dasarnya, ini hanya mencatat langkah-langkah ke console.log.
Saya akan menyatakan hasil dari apa yang Anda lihat di tong itu di sini. Untuk DOM arahan khusus, tp dan sp adalah sebagai berikut:
<tp>
<sp>
</sp>
</tp>
LAYANAN kompilasi sudut akan menghubungi:
tp compile
sp compile
tp pre-link
sp pre-link
sp post-link
tp post-link
Kode jsbin juga memiliki FUNGSI pasca-tautan tp secara eksplisit memanggil kompilasi SERVICE pada arahan ketiga (atas), yang melakukan ketiga langkah di akhir.
Sekarang, saya ingin membahas beberapa skenario untuk menunjukkan bagaimana seseorang dapat menggunakan kompilasi dan tautan untuk melakukan berbagai hal:
SKENARIO 1: Petunjuk sebagai MACRO
Anda ingin menambahkan arahan (misalnya ng-show) secara dinamis ke sesuatu di template Anda yang dapat Anda peroleh dari suatu atribut.
Katakanlah Anda memiliki templateUrl yang menunjuk ke:
<div><span><input type="text"></span><div>
dan Anda ingin arahan khusus:
<my-field model="state" name="address"></my-field>
yang mengubah DOM menjadi ini:
<div><span ng-show="state.visible.address"><input ng-model="state.fields.address" ...>
pada dasarnya, Anda ingin mengurangi boilerplate dengan memiliki struktur model yang konsisten yang dapat ditafsirkan oleh arahan Anda. Dengan kata lain: Anda ingin makro.
Ini adalah penggunaan yang bagus untuk fase kompilasi, karena Anda dapat mendasarkan semua manipulasi DOM pada hal-hal yang Anda tahu hanya dari atribut. Cukup gunakan jQuery untuk menambahkan atribut:
compile: function(tele, tattr) {
var span = jQuery(tele).find('span').first();
span.attr('ng-show', tattr.model + ".visible." + tattr.name);
...
return {
pre: function() { },
post: function() {}
};
}
Urutan operasi akan (Anda bisa melihat ini melalui jsbin yang disebutkan sebelumnya):
- Kompilasi SERVICE menemukan bidang saya
- Ini memanggil FUNGSI kompilasi pada arahan, yang memperbarui DOM.
- Kompilasi SERVICE kemudian masuk ke DOM yang dihasilkan, dan COMPILES (secara rekursif)
- Kompilasi SERVICE kemudian memanggil pra-tautan top-down
- Kompilasi SERVICE kemudian memanggil post-link BOTTOM UP, sehingga fungsi tautan my-field disebut SETELAH simpul interior telah ditautkan.
Dalam contoh di atas, tidak perlu menghubungkan, karena semua pekerjaan direktif dilakukan dalam kompilasi FUNGSI.
Pada titik mana pun, kode dalam arahan dapat meminta LAYANAN kompiler untuk dijalankan pada elemen tambahan.
Ini berarti bahwa kami dapat melakukan hal yang persis sama dalam fungsi tautan jika Anda menyuntikkan layanan kompilasi:
directive('d', function($compile) {
return {
// REMEMBER, link is called AFTER nested elements have been compiled and linked!
link: function(scope, iele, iattr) {
var span = jQuery(iele).find('span').first();
span.attr('ng-show', iattr.model + ".visible." + iattr.name);
// CAREFUL! If span had directives on it before
// you will cause them to be processed again:
$compile(span)(scope);
}
});
Jika Anda yakin bahwa elemen yang Anda lewati ke $ compile SERVICE awalnya bebas direktif (mis. Mereka datang dari templat yang Anda tentukan, atau Anda baru saja membuatnya dengan angular.element ()), maka hasil akhirnya cukup banyak sama seperti sebelumnya (meskipun Anda mungkin mengulangi beberapa pekerjaan). Namun, jika elemen memiliki arahan lain di dalamnya, Anda hanya menyebabkan mereka diproses lagi, yang dapat menyebabkan semua jenis perilaku yang tidak menentu (mis. Pendaftaran ganda acara dan jam tangan).
Jadi, fase kompilasi adalah pilihan yang jauh lebih baik untuk pekerjaan gaya makro.
SKENARIO 2: Konfigurasi DOM melalui data lingkup
Yang ini mengikuti dari contoh di atas. Misalkan Anda memerlukan akses ke ruang lingkup saat memanipulasi DOM. Nah, dalam kasus itu, bagian kompilasi tidak berguna bagi Anda, karena itu terjadi sebelum ruang lingkup tersedia.
Jadi, katakanlah Anda ingin mengeluarkan input dengan validasi, tetapi Anda ingin mengekspor validasi Anda dari kelas ORM sisi server (KERING), dan minta mereka menerapkan otomatis dan membuat UI sisi klien yang tepat untuk validasi tersebut.
Model Anda mungkin mendorong:
scope.metadata = {
validations: {
address: [ {
pattern: '^[0-9]',
message: "Address must begin with a number"
},
{ maxlength: 100,
message: "Address too long"
} ]
}
};
scope.state = {
address: '123 Fern Dr'
};
dan Anda mungkin menginginkan arahan:
<form name="theForm">
<my-field model="state" metadata="metadata" name="address">
</form>
untuk secara otomatis menyertakan arahan dan div yang tepat untuk menampilkan berbagai kesalahan validasi:
<form name="theForm">
<div>
<input ng-model="state.address" type="text">
<div ng-show="theForm.address.$error.pattern">Address must begin with a number</input>
...
Dalam hal ini Anda pasti perlu akses ke ruang lingkup (karena di situlah validasi Anda disimpan), dan harus mengkompilasi penambahan secara manual, sekali lagi berhati-hati untuk tidak menggandakan kompilasi hal-hal. (sebagai catatan tambahan, Anda perlu menetapkan nama pada tag formulir yang berisi (saya berasumsi theForm di sini), dan dapat mengaksesnya di tautan dengan iElement.parent (). controller ('form'). $ name) .
Dalam hal ini tidak ada gunanya menulis fungsi kompilasi. Tautan benar-benar yang Anda inginkan. Langkah-langkahnya adalah:
- Tetapkan template yang sama sekali tidak memiliki arahan sudut.
- Tentukan fungsi tautan yang menambahkan berbagai atribut
- HAPUS segala arahan sudut yang mungkin Anda izinkan pada elemen tingkat atas Anda (arahan medan-saya). Mereka sudah diproses dan ini adalah cara agar mereka tidak diproses ganda.
- Selesai dengan memanggil kompilasi SERVICE pada elemen tingkat atas Anda
Seperti itu:
angular.module('app', []).
directive('my-field', function($compile) {
return {
link: function(scope, iele, iattr) {
// jquery additions via attr()
// remove ng attr from top-level iele (to avoid duplicate processing)
$compile(iele)(scope); // will pick up additions
}
};
});
Anda bisa, tentu saja, mengkompilasi elemen bersarang satu demi satu untuk menghindari khawatir tentang pemrosesan duplikat ar arahan ketika Anda mengkompilasi elemen tingkat atas lagi.
Satu catatan terakhir tentang skenario ini: Saya menyiratkan Anda akan mendorong definisi validasi dari server, dan dalam contoh saya, saya telah menunjukkannya sebagai data yang sudah ada dalam cakupan. Saya meninggalkannya sebagai latihan bagi pembaca untuk mengetahui bagaimana orang mungkin perlu menarik data tersebut dari REST API (petunjuk: kompilasi ditangguhkan).
SKENARIO 3: pengikatan data dua arah melalui tautan
Tentu saja penggunaan tautan yang paling umum adalah dengan hanya menghubungkan pengikatan data dua arah melalui watch / apply. Sebagian besar arahan termasuk dalam kategori ini, sehingga cukup tercakup di tempat lain.
