Penciptaan pengontrol
Pengontrol AngularJS digunakan di mana -mana, dan demonstrasi kode relatif mudah dibuat.
<! Doctype html> <html xmlns = "http://www.w.org//xhtml" ng-app = "exampleApp"> <head> <meta http-equiv = "content-type" content = "text/html; charset = UTF-"/> <cent-type "content =" text/html; charset = UTF-"/> <type" content "content =" text/html; charset = UTF-"/> <type" content "content =" text/html; charset = UTF-"/" src = "angular.js"> </script> <link href = "bootstrap-theme.css" rel = "stylesheet" /> <link href = "bootstrap.css" rel = "stylesheet" /><script> gauld.module.csampampleApp ", []). {$ scope.setInput = function (value) {console.log ("print:" + value);}}); </script> </head> <body ng-controller = "defaultctrl"> <v> <h> count </h> <Div> <input ng-model yang diperlukan = "value"/<h> NG-klik = "setInput (value)"> Klik </button> </div> </body> </html>Kontrolnya sangat sederhana. Pertama, saya menambahkan atribut NG-App ke HTML untuk menunjukkan ruang lingkup modul.
Menambahkan NG-Controller ke tubuh untuk mewakili ruang lingkup pengontrol defaultCtrl.
Perintah NG-Model dalam catatan input adalah data yang mengikat, pengikatan data dua arah (MVVM).
$ SCOPE adalah lingkup bawaan AngularJS.
Contoh ini hanya untuk mencetak nilai input ke konsol, seperti yang ditunjukkan pada gambar:
Itu saja, itu sederhana.
Beberapa masalah lingkup pengontrol
Sekarang mari kita ubah program.
<body> <v div-controller = "defaultctrl"> <h> count </h> <div> <input diperlukan ng-model = "value"/> <tombol klik = "setInput (value)"> klik </buttctrl "</Div> </Div> <Div Ng-Controller =" Default "> </Div> </Div> <Div Ng-Controller =" Default "> </Div> </Divan </Div <Div-Controntroller =" Default "> </Div> </Divan </Div <Div-Controller =" Default "> </Div> </Div <count <Div-controntroller =" Default-l " /> <tombol ng-click = "setInput (value)"> Klik </button> </div> </body>
Sisa kode tetap tidak berubah, saya hanya memasukkan properti-controller yang dimasukkan ke dalam tubuh ke dalam dua divs. Saya menggunakan kembali pengontrol DefaultCtrl. Saya kira jika saya memasukkan konten di tag input pertama dan saya mengklik tombol tombol pengontrol kedua, akankah hasil yang Anda harapkan akan muncul?
Apakah hasilnya sama dengan apa yang Anda pikirkan tentang Anda? Anda dapat melihat bahwa hasilnya tidak terdefinisi. Dalam penjelasan yang baik, seharusnya ruang lingkup mereka berbeda. Meskipun Anda menggunakan kembali pengontrol terpadu, ruang lingkupnya memang berbeda saat membuatnya.
Fungsi pabrik yang disebut akan mengembalikan lingkup yang berbeda.
Jadi bagaimana cara mengakses di antara lingkup yang berbeda? Di AngularJS, ada $ rootscope untuk akses ruang lingkup.
Berikut adalah tiga fungsi untuk diperkenalkan.
$ on (name, handler) Daftarkan fungsi penangan acara yang akan dipanggil ketika acara tertentu diterima oleh ruang lingkup saat ini.
$ emit (name, args) mengirimkan peristiwa ke ruang lingkup induk saat ini sampai ruang lingkup root.
$ Broadcast (Name, ARGS) mengirimkan acara ke subscope di bawah ruang lingkup saat ini, parameternya adalah nama acara dan objek yang digunakan untuk memberikan data tambahan untuk acara tersebut.
Sekarang ubah kode berikut:
<script> angular.module ("exampleappp", []). controller ("defaultctrl", function ($ scope, $ rootscope) {$ scope. $ on ("updateValue", function (event, argin) {$ scope.input = args.zip;}); $ scope.setinput = function = foundon (function) {aRg.zip;}); $ scope.setinput = function = foundon = root) {args.zip;}); $ scope.setinput = function = root) {aRg.ZIP;}); $ scope.setinput = function = root) {$) {aRG.ZIP;}); $ scope. { zip: value });console.log("print:" + $scope.input);}$scope.copy = function () {console.log("copy:" + $scope.input);};});</script> <div ng-controller="defaultCtrl"><h>Count</h><div><input required ng-model="value" /> <tombol ng-click = "copy ()"> COPY </button> </div> </div>Dalam kode segmen saya menambahkan beberapa fungsi dan mengubah fungsi pengontrol kedua secara bersamaan.
hasil:
Itu memang terjadi.
Warisan pengontrol
<script> angular.module ("exampleappp", []). controller ("defaultctrl", function ($ scope, $ rootscope) {//$scope.$on("upDateValue ", function (event, args) {// $ scope.input = args.zip; //}) $. {//$rootscope.$broadcast("upDateValue ", {zip: value}); $ scope.input = value; console.log (" cetak: " + $ scope.input);} $ scope.copy = function () {console.log (" copy: " + $ scope.input); {$ scope.copy = function () {console.log ("copy:" + $ scope.input);};}); </script> <body ng-controller = "defaultctrl"> <v> <h> count </h> <div> <input ng-model = "value" ng-klik = "setInput (value)"> klik </button> </div> <div> <div ng-controller = "SimplecTl"> <h> count </h> <div> <input diperlukan ng-model = "value"/> <tombol klik = "copy ()"> COPY </Tombol </Div> </Div> </Div> </Div>Saya menambahkan pengontrol, dan setelah pengamatan yang cermat terhadap Simplectrl, saya menemukan bahwa DefaultCtrl berisi Simplectrl, sehingga fungsi mewarisi sederhana.
Hasil: Ketika saya memposting input di jendela pertama, yang kedua juga berubah, dan itu harus nilai yang sama.
$ scope scope scope, Anda harus memahami ruang lingkupnya saat menggunakan controller.