Arahan adalah cara untuk mengajar HTML untuk memainkan beberapa trik baru. Selama kompilasi DOM, arahan cocok dengan HTML dan mengeksekusi. Ini memungkinkan perilaku registrasi arahan atau mengonversi struktur DOM.
Angular hadir dengan satu set arahan bawaan, yang sangat membantu untuk membangun aplikasi web. Jika Anda terus berkembang, Anda dapat mendefinisikan Domain Spesifik Bahasa (DSL) di HTML.
1. Arahan kutipan di HTML
Arahan memiliki penamaan gaya cased unta, seperti ngbind (tampaknya tidak dapat digunakan dalam properti ~). Namun, arahan juga dapat dinamai dengan tipe bawah ular (case ular), yang perlu dihubungkan melalui: (usus besar), - (minus) atau _ (garis bawah). Sebagai opsi opsional, Petunjuk dapat diawali dengan "X-" atau "Data-" untuk memenuhi kebutuhan verifikasi HTML. Berikut adalah nama legal arahan:
Petunjuk dapat ditempatkan di nama elemen, atribut, kelas, dan komentar. Berikut ini adalah cara yang setara untuk mengutip Mydir, arahan. (Tetapi banyak arahan terbatas pada penggunaan "properti")
<span my-dir = "exp"> </span> <span> </span> <py-dir> </py-dir> <!-Directive: My-Dir Exp->
Petunjuk dapat dikutip dalam berbagai cara, dan daftar berikut dan cara yang setara:
<! Doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <itement> Invoke-Directive </title> <style type = "text/css"> .ng-cloak {display: none; } </tyle> </head> <body> <div ng-controller = "myctrl"> halo <input ng-model = "name"/> <hr/> ngbind = "name" Ini tidak dapat digunakan ~~ <span ngbind = "name"> </span> <br/> ng: bind = "name" <span "<" name "> </span> <br/> ng: bind =" name "<span" "name" = "<br/> tiM: bind =" name "<span" <"name" </span> <br/> ng: bind = "name" <span "<span" <"name" ng_bind="name"<span ng_bind="name"></span><br/> ng-bind="name"<span ng-bind="name"></span><br/> data-ng-bind="name"<span data-ng-bind="name"></span><br/> x-ng-bind="name"<span x-ng-bind = "name"> </span> <br/> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javaScript"> function myctrl ($ scope) {$ scope.name = "Beauty ~ ~ ~ ~ ~ ~ ~ ~ scope) {$ scope) {$ scope. } </script> </body> </html>2. Interpolasi string
Selama proses kompilasi, kompiler cocok dengan teks dengan ekspresi tertanam dalam atribut (seperti {{sesuatu}}) melalui layanan $ interpolate. Ekspresi ini akan didaftarkan sebagai jam tangan dan akan diperbarui bersama sebagai bagian dari siklus Digest (bukankah itu adalah loop pencernaan sebelumnya?!). Ini interpolasi sederhana:
<img src = "img/{{username}}. jpg"/> halo {{username}}!
3. Proses kompilasi, dan pencocokan arahan
Tiga langkah untuk "mengkompilasi" html:
1. Pertama, ubah HTML menjadi objek DOM melalui API standar browser. Ini adalah langkah yang sangat penting. Karena template harus parsable (sesuai dengan spesifikasi). Ini dapat dibandingkan dengan sebagian besar sistem templat, yang umumnya didasarkan pada string, bukan elemen DOM.
2. Kompilasi DOM dilakukan dengan memanggil metode $ comple (). Metode ini melintasi DOM dan cocok dengan arahan. Jika pertandingan berhasil, itu akan ditambahkan ke daftar arahan bersama dengan DOM yang sesuai. Selama semua arahan yang terkait dengan DOM yang ditentukan diidentifikasi, mereka akan diurutkan dalam prioritas dan menjalankan fungsi kompilasi () mereka dalam urutan itu. Fungsi Compile Directive memiliki peluang untuk memodifikasi struktur DOM dan bertanggung jawab untuk menghasilkan parsing fungsi tautan (). Metode $ compile () mengembalikan fungsi penghubung gabungan, yang merupakan kumpulan fungsi tertaut yang dikembalikan oleh fungsi kompilasi dari Petunjuk itu sendiri.
3. Hubungkan templat ke ruang lingkup melalui fungsi tautan yang dikembalikan pada langkah sebelumnya. Ini pada gilirannya memanggil fungsi tautan Directive sendiri, memungkinkan mereka untuk mendaftarkan beberapa pendengar pada elemen, dan membuat beberapa jam tangan dengan ruang lingkup. Hasilnya adalah ikatan dua arah, instan antara lingkup dan DOM. Ketika ruang lingkup berubah, DOM akan mendapatkan respons yang sesuai.
var $ compile = ...; // disuntikkan ke dalam kode Anda var scope = ...; var html = '<div ng-bind =' exp '> </div>'; // Langkah 1: Parse html ke elemen dom var template = angular.element (html); // Langkah 2: Kompilasi template var linkfn = $ compile (template); // Langkah 3: Tautkan templat yang dikompilasi dengan ruang lingkup. linkfn (scope);
4. Alasan di balik pemisahan kompilasi/tautan
Pada saat ini, Anda mungkin bertanya -tanya mengapa proses kompilasi dibagi menjadi dua langkah: kompilasi dan tautan. Untuk memahami ini, mari kita lihat contoh nyata (repeater)
Halo {{user}}, Anda memiliki tindakan ini: <ul> <li ng-repeat = "Action in user.actions"> {{action.description}} </li> </ul>Sederhananya, alasan mengapa kami memisahkan dua langkah kompilasi dan tautan adalah bahwa kadang -kadang struktur DOM yang sesuai perlu diubah setelah model diubah, seperti repeater.
Ketika contoh di atas dikompilasi, kompiler akan beralih melalui semua node untuk menemukan arahan. {{User}} adalah contoh arahan interpolasi. Ngrepeat adalah arahan lain. Tapi Ngrepeat mengalami kesulitan. Ini membutuhkan kemampuan untuk dengan cepat membuat Li baru untuk setiap tindakan di pengguna. Ini berarti bahwa untuk memenuhi tujuan kloning LI dan menanamkan tindakan spesifik (di sini mengacu pada salah satu nilai tindakan pengguna), perlu menjaga salinan unsur LI yang bersih, yang perlu dikloning dan dimasukkan ke dalam elemen UL. Tapi mengkloning elemen LI tidak cukup. Li juga perlu dikompilasi sehingga arahannya ({{action.descriptions}}) dapat diuraikan dalam ruang lingkup yang benar. Metode asli umumnya menyisipkan salinan elemen LI dan kemudian mengkompilasinya. Namun, menyusun salinan masing -masing elemen LI akan lebih lambat, karena proses kompilasi mengharuskan kita untuk melintasi pohon node DOM, menemukan arahan dan menjalankannya. Jika kita memiliki kompilasi yang perlu memproses 100 item melalui repeater, maka kita akan terjebak dengan masalah kinerja.
Solusi untuk masalah ini adalah memecah proses kompilasi menjadi dua langkah. Tahap kompilasi mengenali semua arahan dan mengurutkannya berdasarkan prioritas, mengikat ruang lingkup spesifik dengan LI spesifik selama tahap penghubung.
Ngrepeat mengkompilasi LIS individu secara terpisah untuk mencegah proses kompilasi jatuh ke dalam elemen LI. Hasil kompilasi dari elemen LI adalah fungsi penghubung arahan yang berisi semua arahan yang terkandung dalam elemen LI, siap untuk terhubung dengan salinan elemen LI spesifik. Saat runtime, Ngrepeat memantau ekspresi dan ditambahkan sebagai item ke array salinan elemen LI, menciptakan ruang lingkup baru untuk elemen LI yang dikloning, dan memanggil fungsi tautan yang sesuai dengan salinan.
Meringkaskan:
1. Fungsi Kompilasi - Fungsi kompilasi relatif jarang dalam arahan, karena sebagian besar arahan hanya peduli untuk bekerja dengan elemen DOM tertentu, daripada mengubah templat elemen DOM (DOM itu sendiri dan struktur internalnya). Untuk mengoptimalkan kinerja, beberapa operasi yang dapat dibagikan oleh instance arahan dapat dipindahkan ke fungsi kompilasi.
2. Fungsi tautan - sangat sedikit arahan yang tidak memiliki fungsi tautan. Fungsi tautan memungkinkan Directive untuk mendaftarkan pendengar pada salinan instance elemen DOM yang ditentukan, atau untuk menyalin konten tertentu dari ruang lingkup ke dalam DOM.
5. Tulis arahan (versi sederhana)
Dalam contoh ini, kami akan membuat arahan yang menampilkan waktu saat ini sesuai dengan format input.
<!DOCTYPE HTML><html lang="zh-cn" ng-app="TimeFormat"><head> <meta charset="UTF-8"> <title>time-format</title></head><body><div ng-controller="MyCtrl" id="main"> Date format: <input ng-model="format" type = "text"/> <hr/> <!-atribut x-current-time berikut ini adalah untuk mencoba penamaan hukum yang disebutkan di atas ~~ saat ini: waktu, waktu saat ini, current_time, data-current-time -_- !!! --> Current time is : <span x-current-time="format" id="myFormat"></span><br/> <button ng-click="remove()">remove the span</button></div><script src="../angular-1.0.1.js" type="text/javascript"></script><script type = "Text/JavaScript"> Angular.Module ("TimeFormat", []) // Daftarkan metode pabrik arahan "saat ini" dalam aplikasi timeformat // seperti yang disebutkan di atas, injeksi ketergantungan dapat ditulis secara langsung dalam fungsi yang ada di atas, tidak ada yang ada di atas (Tanggal (Tanggal (Tanggal/DataFilter. Tambahkan fungsi kompilasi, mengapa? ...) Fungsi pengembalian (lingkup, elemen, attr) {var intervalid; // Perbarui nilai teks dari elemen yang sesuai, yaitu, fungsi pembaruan pembaruan () {element.text, nilainya, nilainya, nilainya (Nilai), Model, Nilai, Nilai, Nilai, Model, Nilai, Model, Nilai, Model, Model, Nilai, Nilai, Model, Execute Scope. $ Watch (attr.CurrentTime, function (value) {scope.format = value; updateTime ();}); }). controller ("myctrl", function ($ scope, $ rootscope) {$ scope.format = "m/d/yy h: mm: ss a"; $ $ remove = function () {var offormat = document.getElementById ("myformat"); if (offormat) {document.getElementById ("myformat"); if (offormat) {informat) ("normat). Acara $ hancurkan dapat dipicu!6. Tulis arahan (versi terperinci)
Di bawah ini adalah pembuatan sampel dari Petunjuk (Template Definisi Objek Directive). Jika Anda ingin melihat daftar terperinci, silakan lanjutkan membaca.
var mymodule = angular.module (...); myModule.directive('directiveName', function factory(injectables) { var directiveDefinitionObject = { priority: 0, template: '<div></div>', templateUrl: 'directive.html', replace: false, transclude: false, restrict: 'A', scope: false, compile: function compile(tElement, tAttrs, transclude) { return { Pre: function prelink (lingkup, ielement, iattrs, controller) {...}, post: function postlink (lingkup, ielement, iattrs, controller) {...}}, tautan: fungsi postlink (scope, ielement, iAttrs) {...} eB;Dalam sebagian besar skenario, kami tidak memerlukan kontrol yang tepat, sehingga definisi di atas dapat disederhanakan. Mendefinisikan setiap bagian dari templat akan dijelaskan dalam bab berikut. Dalam bab ini, kami hanya fokus pada isomer kerangka ini yang menentukan templat (isomer kerangka ini, saya tidak mengerti ... menantikan penambahan semua orang).
Langkah pertama dalam menyederhanakan kode Anda adalah mengandalkan nilai default. Oleh karena itu, kode di atas dapat disederhanakan untuk:
var mymodule = angular.module (...); myModule.directive ('DirectVeVename', Function factory (injectable) {var directiveDefinitionObject = {compile: function compile (telement, tattrs) {return function postlink (scope, ielement, iattrs) {...}}; return directiveDefinitionObject;});Sebagian besar arahan hanya peduli dengan contoh, bukan konversi templat, sehingga mereka dapat disederhanakan lebih lanjut (diterjemahkan sangat keras ... menantikan penambahan semua orang):
var mymodule = angular.module (...); myModule.directive ('DirectiveVerame', Function factory (injectable) {return function postlink (scope, iElement, iattrs) {...}});7. Metode Pabrik
Metode pabrik bertanggung jawab untuk membuat arahan. Ini hanya digunakan sekali, tepat ketika kompiler pertama mencocokkan arahan. Anda dapat melakukan beberapa operasi inisialisasi di sini. Metode pabrik dieksekusi melalui $ injector.invoke, yang memungkinkannya untuk mematuhi semua aturan deklarasi injeksi (Aturan Anotasi Injeksi), membuatnya disuntikkan.
8. Deskripsi Objek Definisi Arahan
Objek Definisi Arahan menyediakan struktur kompiler. Properti adalah sebagai berikut:
1.Name - Nama ruang lingkup saat ini. Nilai default dapat digunakan saat mendaftar (tidak diisi).
2. Prioritas- Ketika ada beberapa arahan yang ditentukan dalam elemen DOM yang sama, kadang-kadang perlu untuk mengklarifikasi perintah eksekusi mereka. Properti ini digunakan untuk mengurutkan sebelum panggilan fungsi kompilasi arahan. Jika prioritasnya sama, perintah eksekusi tidak pasti (setelah percobaan pendahuluan, mereka yang memiliki prioritas lebih tinggi dieksekusi terlebih dahulu, dan level yang sama mirip dengan eksekusi "pasca-pengikatan" terlebih dahulu ". Selain itu, saya sedikit ceroboh selama tes. Ketika mendefinisikan arahan, arahan dengan nama yang sama akan didefinisikan dua kali, tetapi eksekusi menemukan bahwa kedua compile yang dikeluarkan kedua compile atau tautannya.
3.Terminal (Grup Terakhir) - Jika diatur ke "Benar", itu berarti bahwa prioritas saat ini akan menjadi arahan kelompok eksekusi terakhir. Jika ada arahan yang sama dengan prioritas saat ini, mereka masih akan dieksekusi, tetapi pesanan tidak pasti (meskipun pesanan tidak pasti, pada dasarnya sama dengan urutan prioritas. Setelah prioritas saat ini dieksekusi, prioritas yang lebih rendah tidak akan dieksekusi lagi).
4.Scope - Jika diatur ke:
1) .True - Lingkup baru akan dibuat untuk arahan ini. Jika ada beberapa arahan dalam elemen yang sama yang membutuhkan ruang lingkup baru, itu masih akan membuat satu ruang lingkup. Aturan ruang lingkup baru tidak berlaku untuk templat root, sehingga templat root cenderung mendapatkan ruang lingkup baru.
2). {} (Object Hash) - Lingkup baru dan isolat akan dibuat. Perbedaan antara lingkup "isolat" dan ruang lingkup umum adalah bahwa ia tidak diwarisi dari ruang lingkup induk melalui prototipe. Ini sangat membantu untuk membuat komponen yang dapat digunakan kembali dan secara efektif dapat mencegah membaca atau memodifikasi data dari ruang lingkup induk. Lingkup independen ini menciptakan hash objek dengan serangkaian sifat lingkup lokal yang berasal dari ruang lingkup induk. Properti lokal ini berguna untuk aliasing nilai untuk templat -_-!. Definisi penduduk setempat adalah hash properti lingkup lokal ke sumbernya#&) $ &@#) ($ &@#_):
3). @ Atau @attr - Buat properti lingkup lokal ke properti DOM. Karena nilai properti selalu tipe string, nilai ini selalu mengembalikan string. Jika nama atribut tidak ditentukan melalui @Attr, nama lokal akan selalu dengan nama atribut DOM. Misalnya, <widget my-attr = "hello {{name}}">, ruang lingkup widget didefinisikan sebagai: {localname: '@myattr'}. Kemudian, nama lokal dari properti lingkup widget akan memetakan nilai nyata yang dikonversi oleh "hello {{name}}". Setelah perubahan nilai atribut nama, atribut LocalName dari lingkup widget juga akan berubah sesuai (hanya satu arah, berbeda dari "=" di bawah). Atribut nama dibaca dalam lingkup induk (bukan lingkup komponen)
4). = OR = Ekspresi (mungkin attr di sini) - Tetapkan ikatan dua arah antara atribut ruang lingkup lokal dan atribut ruang lingkup induk. Jika nama ATTRIK tidak ditentukan, nama lokal akan konsisten dengan nama atribut. Misalnya, <widget my-attr = "ParentModel">, ruang lingkup yang ditentukan oleh widget adalah: {localmodel: '= myattr'}, lalu properti lingkup widget "LocalName" akan memetakan "ParentModel" lingkup induk. Jika ada perubahan yang terjadi di ParentModel, LocalModel juga akan berubah, dan sebaliknya. (Binding Bi-Way)
5). & Atau & Attr - menyediakan cara untuk menjalankan ekspresi dalam konteks lingkup induk. Jika nama ATTRIK tidak ditentukan, nama lokal akan konsisten dengan nama atribut. Misalnya, <widget my-attr = "count = count + value">, ruang lingkup widget didefinisikan sebagai: {localfn: 'increment ()'}, kemudian mengisolasi properti lingkup "localfn" akan menunjuk ke fungsi yang dibungkus dengan ekspresi tambahan (). Secara umum, kami ingin meneruskan data dari ruang lingkup isolat ke ruang lingkup induk melalui ekspresi. Ini dapat dilakukan dengan melewati peta nilai kunci dari variabel lokal ke dalam fungsi pembungkus ekspresi. Misalnya, jika ekspresi bertambah (jumlah), maka kita dapat memanggil localfn melalui localfn ({jumlah: 22}) untuk menentukan nilai jumlah (contoh di atas benar -benar tidak mengerti, & ke mana Anda pergi?).
5.Controller - Konstruktor Pengontrol. Pengontrol akan diinisialisasi sebelum langkah pra-hubungan dan memungkinkan arahan lain untuk dibagikan melalui yang diperlukan dengan nama yang ditentukan (lihat properti yang diperlukan di bawah). Ini akan memungkinkan arahan untuk berkomunikasi satu sama lain dan meningkatkan perilaku bersama. Pengontrol menyuntikkan objek lokal berikut secara default:
1). $ SCOPE - Lingkup dikombinasikan dengan elemen saat ini
2). $ Elemen - Elemen Saat Ini
3). $ Attrs - Objek atribut dari elemen saat ini
4). $ Transclude - Fungsi penghubung transpos yang pra -terikat dengan lingkup transpos saat ini: Fungsi (cloneLinkingFN). (Fungsi menghubungkan transclude pra-terikat dengan ruang lingkup terjemahan yang benar)
6. Require - Meminta pengontrol lain untuk meneruskannya ke fungsi penghubung arahan saat ini. mensyaratkan bahwa nama pengontrol langsung diteruskan. Jika pengontrol yang sesuai dengan nama ini tidak dapat ditemukan, kesalahan akan dilemparkan. Namanya bisa diawali dengan yang berikut:
1).? - Jangan melempar pengecualian. Ini membuat ketergantungan ini menjadi opsi.
2).^ - Pengontrol yang memungkinkan mencari elemen induk
7. Restrict - String subset EACM, yang membatasi arahan ke metode deklarasi yang ditentukan. Jika dihilangkan, Petunjuk hanya akan mengizinkan deklarasi melalui atribut:
1) E-Nama Elemen: <My-Directive> </my-sirektif>
2) .a - Nama atribut: <div my -disrective = "exp"> </div>
3). C - Nama kelas: <div class = "my -disrective: exp;"> </div>
4) .M-Komentar: <!-Directive: My-Directive Exp->
8. Template - Jika mengganti benar, ganti konten template dengan elemen HTML saat ini, dan migrasi properti dan kelas elemen asli bersama -sama; Jika salah, elemen templat diperlakukan sebagai elemen anak dari elemen saat ini. Untuk informasi lebih lanjut, silakan lihat bab "Membuat Widget" (di mana ... membuat komponen tersedia ...)
9.TemplateUrl - pada dasarnya sama dengan template, tetapi templat dimuat melalui URL yang ditentukan. Karena pemuatan template asinkron, kompilasi dan tautan akan dijeda dan akan dieksekusi setelah pemuatan.
10. Replace - Jika diatur ke True, templat akan menggantikan elemen saat ini alih -alih ditambahkan ke elemen saat ini sebagai elemen anak. (Catatan: bila benar, templat harus memiliki simpul root)
11.Transclude - Kompilasi konten elemen sehingga dapat digunakan dengan Petunjuk. Diperlukan (dalam templat) untuk digunakan (direferensikan). Keuntungan dari transclusion adalah bahwa fungsi penghubung dapat memperoleh fungsi terjemahan yang sudah terikat pada ruang lingkup saat ini. Secara umum, buat widget dan buat ruang lingkup isolat. Terjemahan bukanlah seorang anak, tetapi saudara lelaki dari ruang lingkup isolat. Ini akan membuat widget memiliki keadaan pribadi dan transklusi akan terikat pada ruang lingkup induk (pra-isolasi). ; Jadilah rentang ekstra dalam sesuatu.
1) .True - Konversi konten arahan ini. (Dalam hal ini, itu adalah untuk secara langsung mengkompilasi konten dan memindahkannya ke tempat yang ditentukan)
2). 'Elemen' - Mengubah seluruh elemen, termasuk arahan lain dengan prioritas yang lebih rendah. (Misalnya, setelah menyusun seluruh konten, diperlakukan secara keseluruhan (dibungkus P di luar) dan dimasukkan ke tempat yang ditentukan)
12.compile - berikut adalah fungsi kompilasi, yang akan dijelaskan secara rinci dalam bab -bab berikut
13.link - Berikut adalah fungsi tautan, yang akan dijelaskan secara rinci dalam bab berikut. Properti ini hanya digunakan jika properti kompilasi tidak ditentukan.
9. Fungsi Kompilasi
function compile (telement, tattrs, transclude) {...}
Fungsi kompilasi digunakan untuk menangani konversi templat DOM. Karena sebagian besar arahan tidak memerlukan templat konversi, kompilasi tidak akan sering digunakan. Petunjuk yang membutuhkan fungsi kompilasi, umumnya yang perlu mengonversi templat DOM (seperti Ngrepeat), atau yang perlu memuat konten secara tidak sinkron (seperti NGView). Fungsi kompilasi memiliki parameter berikut:
1.Delement - Elemen template menggunakan elemen arahan saat ini. Aman untuk hanya melakukan konversi template di bawah elemen saat ini atau elemen elemen anak saat ini.
2.Tattrs - Atribut Template - Atribut standar, dinyatakan dalam elemen saat ini, dapat dibagikan di antara berbagai arahan. Untuk detailnya, silakan lihat bab Atribut
3. Transklude fungsi penghubung untuk konversi: fungsi (lingkup, cloneLinking).
Catatan: Jika templat telah dikloning, instance templat dan instance tautan tidak dapat menjadi objek yang sama. Untuk melakukan ini, tidak aman untuk melakukan apa pun selain konversi DOM dalam fungsi kompilasi, yang akan diterapkan pada semua klon. Secara khusus, operasi pendaftaran pendengar acara DOM harus dilakukan dalam fungsi tautan, bukan fungsi kompilasi.
Fungsi kompilasi dapat memiliki nilai pengembalian, dan jenisnya dapat berupa fungsi atau objek.
1. Fungsi pengembalian biasanya digunakan ketika fungsi kompil tidak diperlukan (kosong), yang setara dengan mendaftarkan fungsi penghubung melalui tautan (secara langsung mendefinisikan atribut templat).
2. Mengembalikan objek yang berisi properti pra dan pasca - memungkinkan kita untuk mengontrol saat menghubungkan fungsi dipanggil selama fase penghubung. Untuk detailnya, silakan lihat bab-bab berikut tentang fungsi pra-hubungan dan pasca-hubungan.
10. Fungsi menghubungkan
tautan fungsi (lingkup, ielement, iattrs, controller) {...}
Fungsi tautan bertanggung jawab untuk mendaftarkan pendengar acara DOM, dan juga dapat melakukan operasi pembaruan DOM. Fungsi tautan akan dieksekusi setelah operasi kloning template selesai. Sebagian besar logika arahan disimpan di sini.
1.Scope - SCOPE - digunakan untuk mendaftarkan jam tangan (http://docs.angularjs.org/api/ng.$rootscope.scope#$watch).
2.Element - Element Instance - Elemen yang Digunakan oleh Directive. Aman untuk beroperasi pada elemen anak dalam fungsi postlink. Karena elemen anak telah dikaitkan (terhubung ke model?!).
3.attrs - Instance Atribut - Daftar atribut elemen arus standar. Dibagikan di antara semua fungsi tautan arahan.
4.Controller - Controller Instance - Jika salah satu pengontrol didefinisikan dalam arahan elemen saat ini, Anda bisa mendapatkan instance dari pengontrol di sini. Pengontrol ini dibagikan di antara semua arahan, memungkinkan setiap arahan untuk memperlakukan pengontrol sebagai saluran komunikasi di antara mereka.
Fungsi pra-tautan
Jalankan sebelum elemen anak terhubung. Tidak aman untuk melakukan konversi DOM di sini, karena fungsi penghubung Compiler mungkin tidak menemukan elemen yang benar saat menghubungkan.
Fungsi pasca-tautan
Jalankan setelah elemen anak terhubung. Aman melakukan konversi DOM di sini.
11. Atribut
Objek atribut - sebagai argumen dalam link () atau compile () - adalah cara untuk mengakses yang berikut:
1. Nama atribut standar: Karena arahan, seperti ngbind, dapat dimanifestasikan dalam berbagai bentuk, seperti "ng: bind", "x-ng-bind" ... objek atribut ini memungkinkan kita untuk mengakses atribut melalui penamaan standar (unta).
2. Komunikasi Antar Arahan: Semua arahan berbagi instance objek atribut, sehingga arahan dapat berkomunikasi di antara arahan melalui objek atribut.
3. Dukungan Interpolasi: Atribut interpolasi ditugaskan ke objek atribut, memungkinkan arahan lain untuk membaca nilai yang diinterpolasi.
4. Amati atribut interpolated: Amati perubahan nilai atribut melalui attr. $ Amati, termasuk interpolasi (misalnya, src = "{{bar}}"). Tidak hanya itu sangat efektif, tetapi juga satu -satunya cara untuk hanya mendapatkan nilai sebenarnya. Karena selama tahap penghubung, interpolasi belum ditetapkan (diganti dengan nilai nyata), jadi ketika mengaksesnya saat ini, hasilnya tidak ditentukan.
<! Doctype html> <html lang = "zh-cn" ng-app = "DirectiveProperty"> <head> <meta charset = "utf-8"> <itement> Directive-attribute-test </ title> <style type = "text/css"> .ng-cloak {no tidak ada: tidak ada; } </tyle> </head> <body ng-controller = "myctrl"> <input type = "text" ng-model = "name" value = "myname"/> <p my-attr = "123" directive-p2 attr-dd = "{{name}}"> </p> <script src = "{{{{{name}"> </p> </p> </p> </p> <p> <p> </p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> type = "Text/JavaScript"> </script> <script type = "text/javascript"> var app = angular.module ("directiveProperty", []); app.controller ("myctrl", function ($ scope) {$ scope.name = "my little dada";}); var directiveP2 = app.directive ("directivep2", function () {return {link: function postlink (lingkup, lele, lattr) {console.log ("myattr:" + lattr.myattr); // 123 console.log ("myattr:" + lattr.attrdd); Console.log (attrdd telah mengubah nilai menjadi ' + nilai);12. Memahami transklusi dan ruang lingkup
Kita sering membutuhkan beberapa komponen yang dapat digunakan kembali. Berikut adalah kode pseudo yang menunjukkan bagaimana komponen dialog sederhana dapat bekerja.
<tombol ng-click = "show = true"> show </atton> <dialog visible = "show" on-cancel = "show = false" on-ok = "show = false; dosomething ()"> body Going Here: {{{username}} adalah {{title}}. </Dialog>Mengklik tombol "Show" akan membuka dialog. Dialog memiliki judul yang terikat pada data "nama pengguna", dan ada juga paragraf yang ingin kami tempatkan di dalam dialog.
Berikut ini adalah definisi templat yang ditulis untuk dialog:
<Div ng-show = "show ()"> <h3> {{title}} </h3> <v ng ng-transclude> </div> <vect> <tombol ng-klik = "onok ()"> simpan perubahan </buton> <tombol ng-klik = "oncancel ()"Ini tidak akan membuat dengan benar kecuali kami melakukan perawatan khusus pada ruang lingkup.
Masalah pertama yang perlu kita selesaikan adalah bahwa templat dialog mengharapkan judul akan ditentukan dan akan terikat pada nama pengguna saat diinisialisasi. Selain itu, tombol membutuhkan dua fungsi OnOK dan Oncancel untuk muncul di ruang lingkup. Ini membatasi kegunaan widget ..). Untuk menyelesaikan masalah pemetaan, variabel lokal yang diharapkan oleh template dibuat dengan metode lokal berikut (penduduk setempat, yang diperkirakan merupakan ruang lingkup dalam template definisi arahan):
SCOPE: {title: 'bind', // Mengatur judul untuk menerima data-binding onOK: 'Expression', // Buat delegasi OnOK Function Oncancel: 'Expression', // Buat Delegasi Fungsi Fungsi Oncancel: 'Accessor' // Buat fungsi Getter/Setter untuk visibilitas.}Membuat properti lokal dalam ruang lingkup kontrol membawa dua masalah:
1. Isolasi (isolasi atribut?) - Jika pengguna lupa untuk mengatur judul atribut elemen dalam templat kontrol, judulnya akan terikat pada "judul" atribut dari lingkup leluhur (jika ada). Ini tidak terduga dan tidak diinginkan.
2. Transclusion - DOM yang diterjemahkan dapat melihat penduduk setempat (lingkup isolat?) Dari kontrol. Warga setempat akan mengganti properti yang benar -benar perlu terikat dalam transklusi. Dalam contoh kami, properti judul di plugin menghancurkan properti judul transklusi.
Untuk menyelesaikan masalah kurangnya isolasi atribut ini, kita perlu mendefinisikan ruang lingkup terisolasi untuk arahan ini. Ruang lingkup terisolot tidak diwarisi dari prototipe dari ruang lingkup anak (mengapa itu ruang lingkup anak? Bukankah itu adalah ruang lingkup orang tua?) Jadi kita tidak perlu khawatir tentang masalah konflik atribut (sebagai saudara ruang lingkup saat ini).
Namun, ruang lingkup yang terisolasi membawa masalah baru: jika DOM yang diterjemahkan adalah anak dari lingkup widget yang terisolasi maka ia tidak akan dapat mengikat apa pun. Oleh karena itu, ruang lingkup yang diterjemahkan adalah ruang lingkup anak dari ruang lingkup asli yang dibuat sebelum kontrol menciptakan ruang lingkup yang terisolasi untuk properti lokal. Lingkup yang diterjemahkan dan terisolasi milik simpul saudara kandung (di pohon lingkup).
Ini mungkin tampak agak rumit secara tak terduga, tetapi melakukan hal itu membawa setidaknya kejutan untuk mengendalikan pengguna dan mengontrol pengembang. (Masalahnya terpecahkan)
Oleh karena itu, definisi arahan akhir kira -kira sebagai berikut:
Transclude: True, SCOPE: {title: 'bind', // Mengatur judul untuk menerima ONOK yang mengikat data: 'Ekspresi', // Buat delegasi OnOK Function Oncancel: 'Expression', // Buat acara Fungsi Oncancel delegasi: 'Accessor' // Buat fungsi getter/setter untuk visibilitas. // Saya telah mencoba ini, tetapi gagal ... tolong terus baca}Saya sudah mencoba menyatukan kode di atas menjadi contoh lengkap. Jika Anda menyalin secara langsung, hasil yang diharapkan tidak akan tercapai. Tetapi setelah sedikit modifikasi, plug-in dapat dijalankan.
<!DOCTYPE html><html ng-app="Dialog"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>directive-dialog</title> <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> <script src="../angular.js" type="text/javascript"></script></head><body> <div ng-controller="MyCtrl"> <button ng-click="show=true">show</button> <dialog visible="{{show}}" on-cancel="show=false;" on-oc = "show = false; methodInparentscope ();"> <!-on-cancel di atas dan On-OK dirujuk oleh & dalam lingkup isoloat arahan. Jika ekspresi berisi fungsi, maka Anda perlu mengikat fungsi dalam lingkup induk (saat ini myctrl scope) -> body Going Here: UserName: {{username}}, title: {{title}}. <ul> <!-Anda juga dapat bermain seperti ini di sini ~ Nama adalah lingkup induk-> <li ng-repeat = "name in name"> {{name}} </li> </ul> </dialog> </div> <script type = "text/javascript"> var mymodule = angular.module ("dialog", []); mymodule.controller ("myctrl", function ($ scope) {$ scope.names = ["name1", "name2", "name3"]; $ scope.show = false; $ scope.username = "lclao"; $ scope.itle = "title induk"; $ scope.methodin in lclao "; $ scope. dalam lingkup induk !!! ");};}); mymodule.directive ('dialog', function factory () {return {prioritas: 100, template: ['<div ng-show = "visible">', '<h3> {{title}} </h3>,' <v ng-transclude> </div> ',' </h3> ',' <v ng-transclude> </div> ',' <Div> ',' ',' On-transclude> </div> ',' </h3 ',', 'On-transclude> </div>', '</h3', ng-click = "oncancel ()"> tutup </button> ',' </div> ',' </div> ',' </div> ']. gabungan (""), ganti: false, transclude: true, batasi:' e ', tag-tag: "@", // kutip nilai atribut judul tag on dialog: {title: "@" Bentuk Fungsi Pembungkus Oncancel: "&", // Gunakan Fungsi Wrapper Referensi Konten Properti On-Cancel dari Tag Dialog Terlihat: "@" // mengacu pada nilai properti yang terlihat dari tag dialog}}; </script> </body> </html>13. Membuat Komponen
Kami biasanya berharap untuk mengganti arahan melalui struktur DOM yang kompleks (elemen ini terletak? Tujuannya mungkin untuk membuat titik -titik kompleks internal arahan, yang terlihat luar biasa poin @_ @). Ini membuat Penyaringan Pintasan untuk Membangun Aplikasi menggunakan komponen yang dapat digunakan kembali.
Berikut adalah contoh komponen yang dapat digunakan kembali:
<!DOCTYPE html><html ng-app="ZippyModule"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>ZippyModule</title> <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> <style type = "text/css"> .zippy {border: 1px solid black; Tampilan: blok inline; Lebar: 250px; } .zippy.opened> .title: sebelum {konten: ''; } .zippy.opened> .body {display: block; } .zippy.closed > .title:before { content: '► '; } .zippy.closed > .body { display: none; } .zippy > .title { background-color: black; color: white; padding: .1em .3em; cursor: pointer; } .zippy > .body { padding: .1em .3em; } </style> <script src="../angular.js" type="text/javascript"></script></head><body> <div ng-controller="MyCtrl"> Title: <input ng-model="title" type="text"><br/> Text: <textarea ng-model="text"></textarea> <hr/> <div zippy-title="Details: {{title}}...">{{text}}</div> </div> <script type="text/javascript"> var myModule = angular.module("ZippyModule", []); myModule.controller("MyCtrl", function ($scope) { $scope.title = "Here is the title"; $scope.text = "Here is the content... "; }); myModule.directive('zippy', function () { return { template: '<div>' + ' <div>{{title}}</div>' +//This title belongs to the property of the current direct isolate scope ' <div ng-transclude></div>' + //What is here, what is obtained is the property of the parent scope '</div>', replace:true, transclude: true, restrict:'C', scope:{ title:"@zippyTitle"//Bind the zippy-title attribute on the directive element}, link:function(scope,element,attrs) { var title = angular.element(element.children()[0]), opened = false; title.bind("click", toogle); element.addClass("closed"); function toogle() { opened = !opened; element.removeClass(opened ? "closed" : "opened"); element.addClass(opened ? "opened" : "closed"); } } }; }); </script></body></html>