PENDAHULUAN LATAR BELAKANG
Contoh ini adalah contoh dalam video, ada Superman yang dinamis, dengan tiga kemampuan, kekuatan kekuatan, kecepatan kecepatan, cahaya cahaya.
Ketiga kemampuan ini digunakan sebagai tiga atribut, dan mendefinisikan Superman dinamis sebagai tag. Anda dapat memiliki kemampuan ini dengan menambahkan atribut yang sesuai.
Untuk memfasilitasi tampilan hasil, tambahkan acara respons mouse ke tag. Ketika mouse bergerak ke tag yang sesuai, metode akan dipicu untuk mencetak kemampuan yang dimilikinya.
Analisis program
Kode untuk bagian HTML adalah sebagai berikut:
<div> <superman> Nothing! </superman> <Superman Strength> Kekuatan! </superman> <Superman Speeds Speed> Speed Kekuatan! </superman> <Superman Speed Speed Light> Light Speed Light! </superman> </div>
Mari kita lihat bagaimana mengimplementasikannya. Hal pertama adalah membuat modul:
var myAppModule = angular.module ("myapp", []);
Atas dasar modul ini, buat tag superman, mirip dengan yang sebelumnya.
myAppModule.directive ("superman", function () {return {scope: {}, restrict: 'ae', translate: true, template: "<div> <v ng ng-transclude> </div> </div>, controller: function ($ scope) {$ scope.abilities = []; ini. $ scope.abilities.push (kekuatan "); console.log (scope.abilities);});Perbedaannya di sini adalah bahwa ada atribut pengontrol di dalam metode ini. Ini bukan pengontrol seperti NG-Controller, tetapi antarmuka bahwa instruksi terbuka ke luar. Metode yang dinyatakan di dalam dapat digunakan sebagai metode publik secara eksternal, dan instruksi lain dapat menggunakan metode ini melalui dependensi.
Selanjutnya, buat tiga perintah yang sesuai dengan kemampuan
myAppModule.directive ("kekuatan", function () {return {membutuhkan: '^superman', link: function (scope, elemen, attr, supermanctrl) {supermanctrl.addStrength ();}}}); myAppModule.directive ("speed", function () {return {membutuhkan: '^superman', link: function (scope, elemen, attr, supermanctrl) {supermanctrl.addspeed ();}}}); myAppModule.directive ("light", function () {return {membutuhkan: '^superman', tautan: fungsi (lingkup, elemen, attr, supermanctrl) {supermanctrl.addlight ();}}});Kode tiga instruksi hampir sama, di mana memerlukan menentukan instruksi dependen.
Ada parameter tambahan supermanctrl di tautan. Parameter ini ditebak sebagai pengontrol di Superman, jadi metode penamaannya adalah Superman+Ctrl.
[Karena saya tidak mengerti prinsip -prinsip internal, ini hanya tebakan, tetapi eksperimen telah membuktikan bahwa jika nama parameter ini diubah, kesalahan akan dilaporkan. 】
Setelah menyatakan ketiga instruksi ini, Anda dapat menggunakan ketiga instruksi ini sebagai atribut super. Ketika atribut ini ditunjukkan, metode internal dalam tautan akan dipicu dan metode yang diungkapkan di Superman akan dipanggil.
Singkatnya, proses instruksi interaktif:
1 Pertama -tama buat arahan dasar, dan setelah atribut pengontrol, tambahkan metode yang diungkapkan kepada publik.
2 Buat instruksi interaktif lainnya, tambahkan ketergantungan instruksi yang sesuai setelah atribut yang memerlukan; hubungi metode yang terbuka di tautan
Semua Kode Program:
<! Doctype html> <html ng-app = "myapp"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/<script src = "http:/apapps.bdimg.com/libs/angular.js =" http:12.mal </head> <body> <div> <superman> Nothing! </superman> <superman Strength> Kekuatan! </superman> <superman Strength> kecepatan kekuatan! </superman> <superman speed speed> kecepatan kekuatan! </superman> <Superman Speed Speed> Light Speed; myAppModule.directive ("superman", function () {return {scope: {}, restrict: 'ae', translate: true, template: "<div> <v ng ng-transclude> </div> </div>, controller: function ($ scope) {$ scope.abilities = []; ini. $ scope.abilities.push (kekuatan "); console.log (scope.abilities);}); myAppModule.directive ("kekuatan", function () {return {membutuhkan: '^superman', link: function (scope, elemen, attr, supermanctrl) {supermanctrl.addStrength ();}}}); myAppModule.directive ("speed", function () {return {membutuhkan: '^superman', link: function (scope, elemen, attr, supermanctrl) {supermanctrl.addspeed ();}}}); myAppModule.directive ("light", function () {return {membutuhkan: '^superman', tautan: fungsi (lingkup, elemen, attr, supermanctrl) {supermanctrl.addlight ();}}}); </script> </body> </html>Hasil Menjalankan:
Di atas adalah informasi tentang interaksi instruksi AngularJS. Kami akan terus menambahkan informasi yang relevan di masa mendatang. Terima kasih atas dukungan Anda untuk situs ini!