Untuk instruksi, mereka dapat dengan mudah dipahami sebagai fungsi yang berjalan pada elemen DOM tertentu, dan instruksi dapat memperluas fungsi elemen ini.
Pertama, mari kita lihat contoh parameter lengkap dan kemudian perkenalkan fungsi dan penggunaan setiap parameter secara rinci:
angular.module ('myapp', []) .directive ('mydirective', function () {return {batasi: string, prioritas: angka, terminal: boolean, template: string atau template function: function, tattrs) ooplude, forolude, TemplateUrl: string, ganti: boolean or boolean, tattrs) {...}, templateUrl: string, ganti: boolean or boolean orop) {... Fungsi (lingkup, elemen, attrs, transclude, OtherInjectable) {...}, controlleras: string, memerlukan: string, tautan: fungsi (lingkup, ielement, iattrs) {...}, kompilasi: // return objek atau fungsi koneksi, seperti yang ditunjukkan: fungsi (Telement, tattrs, transclude) {return {preer {scance, function, function, tattrs, transclude) {return {preer: function (tattrs, tattrs, transclude) {return {{{pRE: function (tattrs, tattrs, transclude) {return {pRE: {function, function (tattrs, transclude) {return {tattrs) POST: FUNGSI (SCOPE, IELEMENT, IATTRS, CONTROLER) {...}} return function postlink (...) {...}}};});Batasi [string]
Batasi adalah parameter opsional. Digunakan untuk menentukan dalam bentuk instruksi yang dinyatakan dalam DOM. Nilai standarnya adalah, yaitu, dinyatakan dalam bentuk atribut.
Nilai opsional adalah sebagai berikut:
E (elemen)
<My-Directive> </yrective>
A (properti, nilai default)
<div my-disrektif = "ekspresi"> </div>
C (nama kelas)
<div> </div>
M (note)
<-Directive: My-Directive Expression->
Secara umum, mengingat kompatibilitas browser, sangat disarankan agar atribut default segera dinyatakan dalam bentuk atribut. Metode terakhir disarankan untuk tidak menggunakan indeks kualifikasi saat tidak diperlukan.
Kode:
angular.module ('app', []) .directive ('mydirective', function () {return {restrict: 'e', template: '<a href = "http://www.baidu.com"> Baidu </a>'};}) htmlcode: My my-directive> </a> '};}) htmlcode: My my-directive> </a>'};}) htmlcode: My my-directive> </a> </a;Memengaruhi:
Prioritas [int]
Sebagian besar instruksi mengabaikan parameter ini dan menggunakan nilai default 0, tetapi beberapa skenario sangat penting atau bahkan diperlukan untuk menetapkan prioritas tinggi. Misalnya, Ngrepeat menetapkan parameter ini menjadi 1000, sehingga dapat memastikan bahwa pada elemen yang sama selalu dipanggil sebelum instruksi lain.
terminal [bool]
Parameter ini digunakan untuk berhenti menjalankan instruksi pada elemen saat ini yang memiliki prioritas lebih rendah daripada instruksi ini. Namun, instruksi dengan prioritas yang sama dengan instruksi saat ini masih akan dieksekusi.
Sebagai contoh: NGIF memiliki prioritas yang sedikit lebih tinggi dari NGVIEW (mereka sebenarnya adalah parameter terminal). Jika nilai ekspresi NGIF benar, NGView dapat dieksekusi secara normal, tetapi jika nilai ekspresi NGIF salah, NGVIEW tidak akan dieksekusi karena prioritas NGView rendah.
template [string atau fungsi]
Parameter templat adalah opsional dan harus diatur ke salah satu dari dua bentuk berikut:
Sepotong teks html;
Fungsi yang dapat menerima dua parameter, parameternya adalah telement dan tattrs, dan mengembalikan string yang mewakili templat. t dalam telement dan tattrs adalah singkatan dari Template, relatif terhadap contoh.
Pertama, mari kita tunjukkan penggunaan kedua:
angular.module ('app', []) .directive ('mydirective', function () {return {restrict: 'eac', template: function (elem, attr) {return "<a href = '" + attr.Value "'>" + attr.Text + "</a>";}};HTMLCode: (Efeknya sama seperti di atas, tidak ada demonstrasi yang akan dibuat)
<my-directive value = "http://www.baidu.com" text = "baidu"> </py-directive> <Div My-Directive value = "http://www.baidu.com" Text = "Baidu"> </div>
templateUrl [string atau fungsi]
TemplateUrl adalah parameter opsional, yang dapat dari jenis berikut:
String yang mewakili jalur file HTML eksternal;
Fungsi yang dapat menerima dua parameter, parameternya adalah telement dan tattrs, dan mengembalikan string dengan jalur file HTML eksternal.
Either way, URL dari template akan dilewati melalui lapisan keamanan internal NG, terutama $ getTrustedResourceurl, yang melindungi template dari dimuat oleh sumber yang tidak dipercaya. Secara default, saat memanggil Petunjuk, file template HTML akan diminta melalui AJAX di latar belakang. Memuat sejumlah besar templat akan sangat memperlambat aplikasi klien. Untuk menghindari latensi, templat HTML dapat di -cache sebelum menggunakan aplikasi.
Kode:
angular.module ('app', []) .directive ('mydirective', function () {return {restrict: 'aec', templateUrl: function (elem, attr) {return attr.Value + ".html"; // Tentu saja di sini kita dapat secara langsung menentukan jalur, dan kita dapat memasukkan ekspresi dalam Templat "Tentu saja kita dapat secara langsung menentukan jalur, dan kita dapat menyertakan ekspresi dalam Templat" Tentu saja kita dapat secara langsung menentukan jalur, dan kita dapat menyertakan ekspresi dalam Templat "Tentu saja kita dapat secara langsung menentukan jalur, dan kita dapat menyertakan ekspresi dalam Templat"ganti [bool]
Ganti adalah parameter opsional. Jika parameter ini diatur, nilainya harus benar karena nilai defaultnya salah. Nilai default berarti bahwa templat akan dimasukkan ke dalam elemen yang menyebut arahan ini sebagai elemen anak.
Misalnya, di bawah nilai default dari contoh di atas, kode HTML yang dihasilkan adalah sebagai berikut:
<my-directive value = "http://www.baidu.com" text = "baidu"> <a href = "http://www.baidu.com"> Baidu </a> </yry-directive>
Jika ganti = true disetel
<a href = "http://www.baidu.com" value = "http://www.baidu.com" Text = "Baidu"> Baidu </a>
Menurut pengamatan saya, efek ini hanya akan menunjukkan efek aktual ketika membatasi = "E".
Setelah memperkenalkan parameter instruksi dasar, parameter ruang lingkup yang lebih penting terlibat ...
Parameter Lingkup [bool atau objek]
Parameter ruang lingkup adalah opsional dan dapat diatur ke true atau objek. Nilai defaultnya salah.
Jika beberapa arahan pada elemen menggunakan ruang lingkup isolasi, hanya satu dari mereka yang dapat berlaku. Hanya elemen root dalam templat arahan yang dapat memperoleh ruang lingkup baru. Oleh karena itu, ruang lingkup diatur ke true secara default untuk objek -objek ini. Fungsi arahan bawaan NG-controller adalah untuk mewarisi dari ruang lingkup induk dan membuat ruang lingkup anak baru. Ini menciptakan ruang lingkup anak baru yang diwarisi dari ruang lingkup induk. Warisan di sini tidak akan dijelaskan secara rinci, dan pada dasarnya sama dengan warisan yang berorientasi pada objek.
Pertama, mari kita analisis sepotong kode:
<Div ng-app = "app" ng-init = "name = 'grandFather'"> <div ng-init = "name = 'father'"> generasi pertama: {{name}} <div ng-init = "name = 'son'" ng-controller = "someController"> generasi kedua: {{{{{{{{{{{{{{{{{someCroller ". Nama}} </div> </div> </div> </div> </div> </div>Kami menemukan bahwa generasi pertama, kami menginisialisasi nama sebagai ayah, tetapi generasi kedua dan generasi ketiga sebenarnya adalah ruang lingkup yang sama, jadi nama mereka sebenarnya adalah objek, jadi efeknya adalah sebagai berikut:
Generasi Pertama: Ayah
Generasi Kedua: Cucu
Generasi Ketiga: Cucu
Kami memodifikasi kode untuk mengisolasi generasi ketiga dan kemudian memeriksa efeknya:
<Div ng-app = "app" ng-init = "name = 'grandFather'"> <div ng-init = "name = 'father'"> generasi pertama: {{name}} <div ng-init = "name = 'son'" ng-controller = "somecontroller"> generasi kedua: {{{{"name {" name {"name {" name {"name {" name {{"name: ng-controller = "SecondController"> Generasi Ketiga: {{name}} </div> </div> </div> </div> </div> </div> angular.module ('app', []) .controller ('somecontroller', function ($ scope) {}) .controller ('SecondController', function ($ scope) {})Efeknya adalah sebagai berikut:
Generasi Pertama: Ayah
Generasi Kedua: Nak
Generasi Ketiga: Cucu
Setelah memodifikasi kode, mari kita lihat warisan:
<Div ng-app = "app" ng-init = "name = 'grandFather'"> <ver> generasi pertama: {{name}} <div ng-controller = "somecontroller"> generasi kedua: {{name} </div {{div {{{{{{{{{{{{{{{/{second-controller = "> </div> </div>Efeknya adalah sebagai berikut:
Generasi Pertama: Ciuman Kakek
Generasi Kedua: Ciuman Kakek
Generasi Ketiga: Ciuman Kakek
Jika Anda ingin membuat arahan yang dapat mewarisi ruang lingkup dari prototipe eksternal dan mengatur properti ruang lingkup ke true, itu hanyalah isolasi yang dapat diwariskan, yaitu, itu tidak dapat secara terbalik mempengaruhi ruang lingkup induk.
Mari kita lihat contoh lain:
angular.module ('myapp', []) .controller ('MainController', function ($ scope) {}) .directive ('mydirective', function () {return {batasi: 'a', false, // beralih ke {}, uji true prioritas: 100, Templated: '<' <pemy, // {{{{{{{{{100, {{{{{{{{{{{{{{100, {{{{{{{{100, { NG-Model = "MyProperty"/> </div> '};Kode HTML:
<Div ng-controller = 'MainController' ng-init = "myProperty = 'Hello World!'"> Eksternal: {{myProperty}} <input ng-model = "myproperty"/> <v my-disrektif> </div> </div>Saat kita mengubah nilai lingkup yang akan kita temukan
Salah: waris tetapi tidak mengisolasi
Benar: mewarisi dan mengisolasi
{}: Terisolasi dan tidak diwariskan
transclude
Transclude adalah parameter opsional. Nilai defaultnya salah. Embedding sering digunakan untuk membuat komponen yang dapat digunakan kembali, contoh khas adalah kotak dialog modal atau bilah navigasi. Kita dapat melewati seluruh seluruh templat, termasuk instruksi di dalamnya, ke dalam satu instruksi dengan menanamkannya. Bagian dalam arahan dapat mengakses ruang lingkup arahan eksternal, dan templat juga dapat mengakses objek ruang lingkup eksternal. Untuk meneruskan ruang lingkup, nilai parameter ruang lingkup harus diatur untuk mengisolasi ruang lingkup dengan {} atau true. Jika parameter ruang lingkup tidak diatur, ruang lingkup di dalam arahan akan diatur ke ruang lingkup templat yang masuk.
Gunakan TransClude: Benar hanya jika Anda ingin membuat arahan yang dapat berisi konten apa pun.
Mari kita lihat dua contoh - bilah navigasi:
<Div Side-box> <div> <a href = ""> grafik </a> <a href = ""> ng </a> <a href = ""> d3 </a> <a href = ""> front-end </a> <a href = ""> startup </a> </div> </Div>
JScode:
angular.module ('myapp', []) .directive ('sidebox', function () {return {batasi: 'ea', ruang lingkup: {title: '@'}, translate: true, template: 'div> <h2>' + '{{title}} </h2> <Div> <h2>' + ' });Kode ini memberi tahu kompiler NG untuk meletakkan apa yang didapat dari elemen DOM di mana ia menemukan arahan NG-Transclude.
Mari kita lihat contoh dari situs web resmi:
angular.module ('docSisofnbindexample', []) .controller ('controller', ['$ scope', '$ timeout', function ($ scope, $ timeout) {$ scope.name = 'TOBIAS'; $ scope.hidedialog = function () {$ $ scope.dialrishiding = $ scope = hidedialog = function () {$ $ scope.dialrishiding = $ scope = $ {function () {$ $ scope.dial.dialriding = $ scope = $ {function () {$ $ scope.dial.dialriding = $ scope = $ {function) {$ $ $ scope.dial.dial {) {) {$ $ scope. false;}, 2000);my-dialog-close.html
my-dialog-close.html <div> <a href ng-click = "close ()"> × </a> <div ng-transclude> </div> </div>
index.html
<Div ng-controller = "controller"> <my-dialog ng-hide = "dialogishidden" on-close = "hidingialog ()"> Lihat isinya, {{name}}! </sy-dialog> </div>Jika instruksi menggunakan parameter TransClude, pengontrol tidak dapat memantau perubahan dalam model data secara normal. Disarankan untuk menggunakan layanan $ watch di fungsi tautan.
pengontrol [string atau fungsi]
Parameter pengontrol dapat berupa string atau fungsi. Saat diatur ke string, konstruktor pengontrol yang terdaftar dalam aplikasi akan ditemukan dengan nilai string sebagai nama.
angular.module ('myapp', []) .directive ('mydirective', function () {batasi: 'a', controller: 'somecontroller'})Pengontrol inline dapat didefinisikan melalui konstruktor anonim di dalam instruksi.
angular.module ('myapp', []) .directive ('mydirective', function () {batasi: 'a', controller: function ($ scope, $ element, $ attrs, $ transclude) {// logika pengontrol ditempatkan di sini}});Kami dapat menyuntikkan layanan NG apa pun yang dapat disuntikkan ke pengontrol dan kami dapat menggunakannya dalam instruksi. Ada juga beberapa layanan khusus dalam pengontrol yang dapat disuntikkan ke dalam instruksi. Layanan ini meliputi:
1. $ SCOPE
Lingkup saat ini yang terkait dengan elemen arahan.
2. $ elemen
Elemen yang sesuai dengan instruksi saat ini.
3. $ attrs
Objek yang terdiri dari atribut elemen saat ini.
<div id = "adiv" class = "box"> </div> memiliki objek atribut berikut: {id: "adiv", class: "box"}4. $ Transclude
Fungsi tautan embed akan diprioritaskan dengan ruang lingkup embedding yang sesuai. Fungsi tautan transclude adalah fungsi yang sebenarnya dieksekusi untuk mengkloning elemen dan mengoperasikan DOM.
angular.module ('myapp', []) .directive ('mylink', function () {return {restrict: 'ea', transclude: true, controller: function ($ scope, $ element, $ attrs, $ transclude) {$ transclude (function (clone) {var a = angular.element ('<a> ($') (function (clone) {var a = angular.element ('<a> A.Text (clone.text ()); }) ;;html
<my-link value = "http://www.baidu.com"> Baidu </yy-link>
<Div my-link value = "http://www.google.com"> google </div>
Disarankan untuk menggunakan transcludefn hanya dalam parameter kompilasi. Fungsi tautan dapat mengisolasi instruksi satu sama lain, sedangkan pengontrol mendefinisikan perilaku yang dapat digunakan kembali. Jika kita ingin mengekspos API dari instruksi saat ini ke instruksi lain, kita dapat menggunakan parameter pengontrol, jika tidak kita dapat menggunakan tautan untuk membangun fungsionalitas elemen instruksi saat ini (mis., Fungsi internal). Jika kita menggunakan SCOPE. $ Watch () atau ingin berinteraksi dengan elemen DOM secara real time, menggunakan tautan akan menjadi pilihan yang lebih baik. Dengan embedding, ruang lingkup yang tercermin oleh ruang lingkup dalam pengontrol mungkin berbeda dari yang kami harapkan. Dalam hal ini, objek $ SCOPE tidak dapat dijamin akan diperbarui secara normal. Ketika Anda ingin berinteraksi dengan ruang lingkup pada layar saat ini, Anda dapat menggunakan parameter ruang lingkup yang diteruskan ke fungsi tautan.
controlleras [string]
Parameter controlleras digunakan untuk mengatur alias controller sehingga pengontrol dapat direferensikan dalam tampilan tanpa menyuntikkan $ scope.
<Div ng-controller = "mainController sebagai main"> <input type = "text" ng-model = "main.name"/> <span> {{main.name}} </span> </div>JScode:
angular.module ('myapp', []) .controller ('MainController', function () {this.name = "halower";});Alias pengontrol memungkinkan perutean dan instruksi untuk membuat pengontrol anonim. Kemampuan ini dapat membuat objek dinamis menjadi pengontrol, dan objek terisolasi dan mudah diuji.
membutuhkan [string atau string []]
Persyaratan adalah string yang mewakili nama instruksi lain. Membutuhkan akan menyuntikkan pengontrol ke dalam instruksi yang ditentukan dan berfungsi sebagai parameter keempat dari fungsi tautan dari instruksi saat ini. Nilai elemen string atau array adalah nama instruksi yang akan digunakan dalam ruang lingkup instruksi saat ini. Bagaimanapun, kompiler NG akan merujuk pada templat instruksi saat ini saat mencari subkontroler.
mengkompilasi 【objek atau fungsi】
Opsi kompilasi itu sendiri tidak sering digunakan, tetapi fungsi tautan sering digunakan. Pada dasarnya, ketika kami mengatur opsi tautan, kami benar -benar membuat fungsi tautan postlink () sehingga fungsi compile () dapat menentukan fungsi tautan. Biasanya, jika fungsi kompilasi ditetapkan, itu berarti bahwa kami ingin melakukan operasi DOM sebelum instruksi dan data waktu-nyata dimasukkan ke dalam DOM. Aman untuk melakukan operasi DOM seperti menambahkan dan menghapus node dalam fungsi ini.
Opsi kompilasi dan tautan saling eksklusif. Jika kedua opsi ini diatur pada saat yang sama, fungsi yang dikembalikan oleh Compile akan dianggap sebagai fungsi tautan, dan opsi tautan itu sendiri akan diabaikan.
Fungsi yang dikompilasi bertanggung jawab untuk mengonversi DOM templat. Fungsi tautan bertanggung jawab untuk menghubungkan ruang lingkup dan DOM. DOM dapat dioperasikan secara manual sebelum ruang lingkup terkait dengan DOM. Dalam praktiknya, operasi semacam ini sangat jarang ketika menulis instruksi khusus, tetapi ada beberapa instruksi bawaan yang menyediakan fungsionalitas seperti itu.
link
Compile: function (tele, tattrs, translateFn) {// tODO: return function (scope, eLe, attrs) {// tautan fungsi};Fungsi tautan adalah opsional. Jika fungsi yang dikompilasi didefinisikan, ia mengembalikan fungsi yang ditautkan, jadi ketika kedua fungsi didefinisikan, fungsi yang dikompilasi membebani fungsi yang ditautkan. Jika instruksi kami sederhana dan tidak memerlukan pengaturan tambahan, kami dapat mengembalikan fungsi dari fungsi pabrik (fungsi callback) untuk mengganti objek. Jika ini dilakukan, fungsi ini adalah fungsi tautan.
Ngmodel
Ini menyediakan API yang lebih mendasarinya untuk memproses data di pengontrol. API ini digunakan untuk menangani pengikatan data, verifikasi, pembaruan CSS dan hal -hal lain yang tidak benar -benar mengoperasikan DOM. Pengontrol NGModel akan disuntikkan ke dalam instruksi bersama dengan NGModel, yang berisi beberapa metode. Untuk mengakses NGModelController, Anda harus menggunakan pengaturan yang diperlukan.
Elemen umum yang digunakan oleh ngmodelcontroller adalah sebagai berikut:
1. Untuk mengatur nilai tampilan dalam ruang lingkup, fungsi ngModel. $ SetViewValue () perlu dipanggil.
Metode $ setViewValue () cocok untuk mendengarkan acara khusus di arahan khusus (seperti menggunakan plugin jQuery dengan fungsi callback), dan kami ingin mengatur $ viewValue dan menjalankan loop pencernaan ketika panggilan balik dipanggil.
angular.module('myApp') .directive('myDirective', function() { return { require: '?ngModel', link: function(scope, ele, attrs, ngModel) { if (!ngModel) return; $(function() { ele.datepicker({ //Callback function onSelect: function(date) { // Set view and call apply scope. apply (function () {ngModel. $ setViewValue (date);}); }}; }); }}; }); }; }); }; }); }; }); }; }); }; }); }; }); }; }); }; }); }; });2. Metode $ render dapat menentukan metode rendering spesifik dari tampilan
3. Properti
1. $ viewValue
Properti $ viewValue memegang string aktual yang diperlukan untuk memperbarui tampilan.
2. $ ModelValue
$ ModelValue dipegang oleh model data. $ ModelValue dan $ ViewValue mungkin berbeda tergantung pada apakah pipa $ parser beroperasi di atasnya.
3. $ parsers
Nilai $ parsers adalah serangkaian fungsi, di mana fungsi disebut satu per satu dalam bentuk pipa. Ngmodel Nilai yang dibaca dari DOM diteruskan ke fungsi dalam $ parsers dan diproses oleh parser secara berurutan.
4. $ Formatters
Nilai $ formatters adalah array fungsi yang disebut satu per satu dalam bentuk pipa ketika nilai model data berubah. Ini tidak berpengaruh pada pipa $ parser dan digunakan untuk memformat dan mengonversi nilai untuk ditampilkan dalam kontrol dengan nilai ini terikat.
5. $ viewChangeListeners
Nilai $ viewChangeListeners adalah array fungsi yang disebut satu per satu dalam bentuk pipa ketika nilai dalam tampilan berubah. Dengan $ viewChangeListeners, perilaku serupa dapat dicapai tanpa menggunakan $ watch. Karena nilai pengembalian diabaikan, fungsi -fungsi ini tidak perlu mengembalikan nilai.
6. $ error
Objek $ error memegang nama validator yang belum melewati verifikasi dan informasi kesalahan yang sesuai.
7. $ Pristine
Nilai $ Pristine adalah Boolean, yang dapat memberi tahu kami apakah pengguna telah memodifikasi kontrol.
8. $ kotor
Nilai $ kotor adalah kebalikan dari $ pristine, yang dapat memberi tahu kami apakah pengguna telah berinteraksi dengan kontrol.
9. $ valid
Nilai $ valid memberi tahu kami apakah ada kesalahan dalam kontrol saat ini. Nilainya salah ketika ada kesalahan, dan nilainya benar ketika tidak ada kesalahan.
10. $ tidak valid
Nilai $ tidak valid memberi tahu kita apakah ada setidaknya satu kesalahan dalam kontrol saat ini, dan nilainya adalah kebalikan dari $ valid.
Di atas adalah kompilasi instruksi dan bahan pengetahuan tentang angularjs. Kami akan terus menambahkannya nanti. Terima kasih atas dukungan Anda untuk situs ini!