Saat menggunakan NG-model dalam ionik saat ini, nilai yang diperoleh dalam pengontrol yang sesuai tidak ditentukan. Saya biasa mendapatkannya saat menggunakan pengikatan model-model AngularJS, yang memalukan dan memutuskan untuk mengetahuinya. Mari kita lihat demo di bawah ini.
Saat mempelajari pengikatan Data Bidirectional dari AngularJS NG-Model, kami mendapatkan nilai NG-model yang sesuai melalui kode berikut:
demo1
<Div ng-app = "myapp" ng-controller = "myctrl"> Nama: <input ng-model = "name"> {{name}} <tombol ng-click = "show ()"> shoname </button> </div>JS yang sesuai
<script> var app = angular.module ('myapp', []); app.controller ('myctrl', function ($ scope) {$ scope.show = function () {console.log ($ scope.name); // Anda dapat dengan benar mendapatkan nilai yang dimasukkan pada halaman konsol.log (allprpos); AllPrpos (OBJ) {// Digunakan untuk menyimpan semua nama atribut dan nilai var props = ""; OBJ [p] + ";";Dengan mencetak objek $ scope, Anda dapat melihat bahwa propertinya memang berisi sepasang nama nilai kunci. Tetapi ketika kami berada di proyek ionik, kami juga mendapatkannya seperti ini:
demo2
<ion-view view-title = "chats"> <eon-content> <div> Nama: <input ng-model = "name"> {{name}} <tombol ng-click = "show ()"> shoname </button> </div> </ion-content> </ion-view>Chatsctrl yang sesuai di pengontrol yang sesuai. JS ionik:
angular.module ('starter.controllers', []). controller ('chatsctrl', function ($ scope) {$ scope.show = function () {console.log ($ scope.name); // console cetak konsol yang tidak ditentukan.Tidak ada nama yang ditemukan di properti $ Scope yang dicetak. Konsol dicetak tidak terdefinisi, tetapi {{name}} pada halaman dapat menjadi output secara normal. Mengapa ini? Diperkirakan banyak pemula ionik telah menemukan situasi ini dalam proyek mereka. Apakah data AngularJS mengikat dua arah tidak valid dalam ionik? Jika saya menulis dengan cara ini:
demo3
<ion-view view-title = "chats"> <ion-content ng-controller = "mychatctrl"> <verv> Nama: <input ng-model = "name"> {{name}} <tombol ng-click = "show ()"> shoname </button> </div> </oon-cont = "show ()"> shoname </button> </div> </oon-cont = "show ()"> shoname </button> </div> </oon-cont = "show ()"> shoname </button> </div> </oonMendefinisikan kembali mychatctrl di controller.js:
angular.module ('starter.controllers', []). controller ('mychatctrl', function ($ scope) {$ scope.show = function () {// klik tombol konsol.log ($ scope.name); // konsol dapat mencetak nilai dalam kotak input input secara normal setiap kali console console.Dengan cara ini, semua orang seharusnya melihat beberapa petunjuk. Faktanya, akar dari semua masalah adalah ruang lingkup. Saat menggunakan perintah arahan seperti NG-Model, NG-RePeat, dll., Ini akan membuat ruang lingkup itu sendiri. Bahkan, ini melibatkan waktu penciptaan pengontrol ionik. Ruang lingkup ruang lingkup kontrol yang dibuat di rute tampilan ionik lebih besar dari ruang lingkup lingkup mychatctrl di demo2 di bawah ini; Ternyata kedua lingkup ini berbeda, yang menjelaskan mengapa nilai yang diperoleh Demo2 di atas tidak terdefinisi. Saya menemukan masalah, bagaimana jika saya menyelesaikan masalah ini?
Lingkup lingkup dapat diwarisi, dan sifat -sifat objek JS juga diwariskan, sehingga kita dapat mengubah Demo2 sedikit dan mendefinisikan nilai default di chatsctrl sekarang:
var $ scope.name = {text: ""};
Input Model NG di halaman:
<ion-view view-title = "chats"> <ion-content ng-controller = "mychatctrl"> <verv> Nama: <input ng-model = "name.text"> {{name}} <tombol ng-klik = "show ()"> shoneMe </Button> </Div> </Div>Setelah melakukan ini, klik tombol dan temukan bahwa nilai $ scope.name dapat dicetak secara normal. Jika Anda tidak ingin menggunakan properti objek untuk melakukan ini, Anda dapat mengikatnya ke ruang lingkup ruang lingkup induknya saat mengikat, dan Ctrl dari Demo2 tetap tidak berubah, dan kode pada halaman diubah menjadi berikut:
<ion-view view-title = "chats"> <ion-content ng-controller = "mychatctrl"> <verv> Nama: <input ng-model = "$ parent.name"> {{name}} <button ng-click = "show ()"> shoneMe </div> </Div> </diven oI-content = "show ()"> shoneame </button> </Div>Ini juga akan mendapatkan nilai $ scope.name, dan masalahnya akan diselesaikan. Jika masalah ini terjadi, hal yang sama dapat dilakukan. Jika Anda memiliki solusi lain, silakan tinggalkan pesan.
Artikel referensi
Model NG ionik tidak bisa mendapatkan masalah nilai
Pahami ruang lingkup angularjs
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.