AngularJS sendiri telah memberikan metode seperti directive dan layanan layanan untuk mewujudkan berbagi dan penggunaan kembali data dan kode. Namun, dalam pengembangan proyek yang sebenarnya, mungkin karena malas atau untuk kenyamanan, Anda akan selalu ingin secara langsung mengkomunikasikan berbagi data antara dua pengontrol, atau fungsi panggilan dan metode. Di sini kita akan melihat metode mana yang dapat memenuhi persyaratan ini.
Layanan Singleton
Singleton Service adalah metode berbagi data dan kode yang didukung oleh AngularJS sendiri. Karena itu adalah singleton, semua pengontrol mengakses data yang sama. Misalnya, layanan berikut dapat diimplementasikan:
Angular .module ('app') .service ('ObjectService', [ObjectService]); function ObjectService () {var list = {}; return {get: function (id) {return list [id]; }, set: function (id, v) {list [id] = v; }};} Dalam satu pengontrol, data yang ditetapkan oleh ObjectService.set('i', 1) dapat diperoleh melalui ObjectService.get('i') di pengontrol lain.
Penyiaran dan acara
Di AngularJS, parameter dapat dilewati saat memicu acara dan mengirim siaran. Fitur ini dapat digunakan untuk mewujudkan berbagi data. Ada tiga metode yang terkait dengan acara dan siaran, yaitu:
1. $ emit (): Peristiwa pemicu, dapat melewati data ke atas, misalnya, pengontrol anak ke pengontrol induk, dan pengontrol ke $ rootscope
2. $ Broadcast (): Kirim siaran, yang dapat menurunkan data, misalnya, pengontrol induk mengirimkan data ke pengontrol anak, atau $ rootscope mengirimkan data ke pengontrol mana pun
3. $ on (): Dengarkan acara dan siaran, dan dapat menangkap $ emit dan $ siaran
Komunikasi antar pengontrol dapat dibagi menjadi tiga situasi:
1. Tidak ada pengontrol asosiasi langsung: Gunakan $ rootscope. $ Emit (), $ rootscope. $ Boardcast () atau $ scope. $ Emit untuk memancarkan data, dan memperoleh data melalui $ rootscope. $ On ()
2. Parent Controller ke Child Controller: Parent Controller menggunakan $ scope. $ Boradcast () untuk mengirim data, dan pengontrol anak menggunakan $ scope. $ On () untuk mendapatkan data
3. Pengontrol Anak ke Pengontrol Induk: Pengontrol Anak menggunakan $ SCOPE. $ Emit () untuk mengirim data, dan pengontrol induk memperoleh data melalui $ scope. $ On ()
Berikut adalah penggunaan sederhananya:
// One ControllerRangular .module ('App') .controller ('Onecontroller', ['$ scope', Onecontroller]); function onecontroller ($ scope) {var data = {value: 'test'}; $ rootscope. $ broadcast ('open.notice.editor', data);} // controllerrangular lainnya .module ('app') .controller ('OtherController', ['$ scope', OtherController]); fUNGSI OtherController ($ scope) {$ scope. $ On.no. $ scope.open (data);Pengontrol induk
Jika kedua pengontrol berbagi pengontrol induk yang sama bersama -sama, berbagi data dan komunikasi dapat dilakukan melalui pengontrol induk. Misalnya:
<Div ng-controller = "ParentController"> <Div ng-controller = "ChildoneController"> </div> <div ng-controller = "childtwocontroller"> </div> </div>
// pengontrol induk Angular .module ('app') .controller ('ParentController', ['$ scope', ParentController]); function ParentController ($ scope) {// variabel untuk lulus data $ scope.data = null;} // childingController angular .module ('appope (' app ') .cONTROLLER (CHILCHCHONCONCTROLLER Angular .module (' ') (' App ') .cONCONTROLLER (' MODULE ('MODULE (' MODULE ('MODULE (' ['$ scope', childoneController]); function childoneController ($ scope) {// pengaturan data $ scope. $ parent.data = 1;} // childController sudut .module ('aplikasi') .controller ('childtwocontroller', ['$ scope'). Childtwocontroller ($ scope, $ timeout) {$ timeout (function () {// data baca console.log ($ scope. $ Parent.data);}, 1000);}Variabel global atau bersama
AngularJS menyediakan enkapsulasi dua variabel, $ window dan $ localstorage . Dengan memodifikasi dan mendengarkan kedua nilai ini, berbagi data dan komunikasi antar pengontrol dapat dicapai. Metode ini adalah sebagai berikut:
// Satu controllerrangular .module ('app') .controller ('onecontroller', ['$ scope', '$ window', onecontroller]); function onecontroller ($ scope, $ window) {// data pengaturan $ window.data = 1;} // controllerrangular lainnya. ['$ scope', OtherController]); fUNGSI OtherController ($ scope) {// dengarkan untuk memodifikasi $ scope. $ watch (function () {return $ window.data;}, function (n) {$ scope.windowData = n;});}Bahkan, metode pemantauan dan modifikasi ini juga dapat digunakan dalam metode komunikasi lainnya.
Ikat elemen
Di AngularJS, Anda dapat memperoleh instance controller di atasnya melalui suatu elemen. Dengan cara ini Anda dapat memperoleh dengan cepat
Ubah data dalam pengontrol, atau hubungi metode dalam pengontrol ini. Misalnya:
<Div ng-controller = "appController"> <div id = "div-a"> </div> </div>
Anda dapat memperoleh instance controller melalui metode berikut:
var instance = angular.element (document.geteLementById ('div-a')). scope ();Kemudian, Anda dapat menggunakan instance ini untuk memanggil metode pengontrol untuk mendapatkan dan memodifikasi nilainya. Tidak mungkin untuk mendapatkan dengan sukses apakah elemen itu sendiri terikat untuk memiliki pengontrol atau elemen induk elemen terikat untuk memiliki pengontrol.
Ini semua tentang berbagi data dan komunikasi antara pengontrol sudut. Teman -teman yang tertarik dengan pengetahuan berbagi data di AngularJS dapat belajar bersama. Terima kasih atas dukungan Anda ke wulin.com.