Kata pengantar
Instruksi AngularJS sendiri saat ini termasuk ng-include , ng-view , ng-switch , dan ng-repeat . Alasan untuk ini adalah bahwa meskipun instruksi ini didefinisikan secara internal oleh AngularJS, mereka juga sama dengan yang diterapkan oleh directive . Mereka menggunakan scope:true secara internal. Lingkup anak mewarisi peran orang tua dan membangun ruang lingkup anak yang independen. Semua binding dua arah tidak dapat diimplementasikan, dan mereka hanya dapat mengimplementasikan ruang lingkup anak mewarisi sifat-sifat induk.
Warisan AngularJS diimplementasikan melalui pewarisan prototipe JavaScript. Warisan prototipe berarti bahwa ruang lingkup induk berada pada rantai prototipe ruang lingkup anak. Karena pencarian rantai prototipe hanya akan dipicu ketika atribut diambil, dan tidak akan dipicu ketika nilai atribut diubah. Jadi kita perlu mengubah tipe asli menjadi objek dan mengikat nilai ke properti objek.
Seperti yang dapat Anda lihat dalam contoh, setelah modifikasi, anak dapat memodifikasi sifat ruang lingkup induk. Jenis primitif hanya dapat mewarisi ruang lingkup kelas induk.
Saat ini ada tiga metode implementasi, dan saya akan memperkenalkannya selanjutnya
Konversi tipe asli ke objek dengan menambahkan {} ke ruang lingkup induk.
Kodenya adalah sebagai berikut:
<! Doctype html> <html lang = "en" ng-app = "childscope"> <head> <meta charset = "utf-8"> <title> </title> <script src = "lib/angular.min.js" type = "text/javascript"> </script>. Tinggi: 50px; Latar Belakang: SkyBlue; } .inner {border: 1px solid skyblue; Lebar: 200px; Tinggi: 150px; } .outer {border: 1px solid saltmon; Lebar: 200px; Tinggi: 150px; } .sco {latar belakang: SkyBlue; } </tyle> </head> <body ng-controller = "childCon"> <hv> <h3> Lingkup induk </h3> <span> {{vm.private1}} </span> <span> {{vm.private2}} </span> </Div> <spiv> <sp. src = "'one.html'"> </div> <div ng-include src = "'Two.html'"> </div> </div> </body> <script> var app = angular.module ("Childscope", ['Template']. vm = $ scope.vm = {}; var template = angular.module ("template", []) .run (["$ templatecache", function ($ templateCache) {$ templatecache.put ("one.html", " +" <v> <input type = 'teks' ng-model = 'vm.pm.priving1'//</</dive). ($ templateCache) {$ templateCache.put ("dua.html", " +" <div> <input type = 'text' ng-model = 'vm.private2'/> " +" <div class = 'sco'> <span> tipe primitif </span> {{test}} </div> " +" + " +") </sprip </span) {{test}} </div> " +" + " +")Implementasi melalui pengontrol sebagai sintaksis
controller as sebenarnya setara dengan objek sampel controller . Prinsipnya adalah untuk mengubah tipe asli menjadi tipe objek.
<! Doctype html> <html lang = "en" ng-app = "childscope"> <head> <meta charset = "utf-8"> <title> </title> <script src = "lib/angular.min.js" type = "text/javascript"> </script>. Tinggi: 50px; Latar Belakang: SkyBlue; } .inner {border: 1px solid skyblue; Lebar: 200px; Tinggi: 150px; } .outer {border: 1px solid saltmon; Lebar: 200px; Tinggi: 150px; } .sco {latar belakang: SkyBlue; } </tyle> </head> <body ng-controller = "childCon as vm"> <dv> <h3> Lingkup induk </h3> <span> {{vm.private1}} </span> <span> {{vm.private2}} </span> </div> <span> <pan h3 h3. src = "'one.html'"> </div> <div ng-include src = "'two.html'"> </div> </div> </body> <script> var app = angular.module ("Childscope", ['Template']. this.private2 = 22; var template = angular.module ("template", []) .run (["$ templatecache", function ($ templateCache) {$ templatecache.put ("one.html", " +" <v> <input type = 'teks' ng-model = 'vm.priving1'///</<///{{] (Text '). ($ templateCache) {$ templateCache.put ("dua.html", " +" <div> <input type = 'text' ng-model = 'vm.private2'/> " +" <div class = 'sco'> <span> tipe primitif </span> {{test}} </div> " +" + " +") </sprip </span) {{test}} </div> " +" + " +")Gunakan $ Parent.name untuk memanggil metode internal untuk mengimplementasikannya.
Prototipe warisan berarti bahwa ruang lingkup induk berada pada rantai prototipe ruang lingkup anak, yang merupakan fitur dari JavaScript.
Lingkup AngularJS juga memiliki hubungan yang ditentukan secara internal berikut:
SCOPE. $ Parent menunjuk ke ruang lingkup induk dari ruang lingkup;
SCOPE. $$ Kejatuhan menunjuk ke subscope pertama ruang lingkup;
SCOPE. $$ Childtail menunjuk ke subscope terakhir lingkup;
SCOPE. $$ NextSibling Points ke ruang lingkup ruang lingkup yang berdekatan;
SCOPE. $$ POIN MELAKUKAN KEPADA SCOPE Lingkup yang Berdekatan sebelumnya;
Dapatkan ikatan dua arah dengan ruang lingkup induk dengan menggunakan scope.$parent.name di ruang lingkup anak.
Contohnya adalah sebagai berikut:
<! Doctype html> <html lang = "en" ng-app = "childscope"> <head> <meta charset = "utf-8"> <title> </title> <script src = "lib/angular.min.js" type = "text/javascript"> </script>. Tinggi: 50px; Latar Belakang: SkyBlue; } .inner {border: 1px solid skyblue; Lebar: 200px; Tinggi: 150px; } .outer {border: 1px solid saltmon; Lebar: 200px; Tinggi: 150px; } .sco {latar belakang: SkyBlue; } </tyle> </head> <body ng-controller = "childcon"> <hv> <h3> Lingkup induk </h3> <span> {{private1}} </span> <span> {{private2} </span> </Div> <dv> <h3> scope sendiri </h3> </span> </Div> <h3> scope sendiri </h3> </span> </Div> <h3> SCOPE OWN </H3> </span> </div> <h3> scope sendiri </h3> </span- </div> <h3> scope sendiri </h3> <gr src = "'one.html'"> </div> <div ng-include src = "'two.html'"> </div> </div> </body> <script> var app = angular.module ("childscope", ['Template']. $ scope.private2 = 22; var template = angular.module ("template", []) .run (["$ templatecache", function ($ templatecache) {$ templatecache.put ("one.html", " +" <v> <input type = 'teks' ng-model = '$ parents.private1//<div> <input type =' Text 'NG-MODEL =' $ Parent.private '/"/</input,"). function ($templateCache) { $templateCache.put("two.html"," + "<div><input type='text' ng-model='$parent.private2'/>" + "<div class='sco'><span>primitive type</span>{{test}}</div>" + "</div>") }])</script></html>Meringkaskan
Di atas adalah seluruh isi masalah lingkup anak AngularJS. Saya berharap ini akan membantu untuk belajar dan bekerja semua orang. Jika Anda memiliki pertanyaan, jangan ragu untuk bertanya.