เมื่อใช้ NG-Model ใน Ionic วันนี้ค่าที่ได้รับในคอนโทรลเลอร์ที่สอดคล้องกันจะไม่ได้กำหนด ฉันเคยได้รับมันเมื่อใช้การผูกโมเดล Ng ของ AngularJS ซึ่งน่าอายและตัดสินใจที่จะค้นหา มาดูการสาธิตด้านล่าง
เมื่อเรียนรู้การเชื่อมโยงแบบสองทิศทางของ AngularJS NG-Model เราจะได้รับค่า NG-model ที่สอดคล้องกันผ่านรหัสต่อไปนี้:
Demo1
<div ng-app = "myapp" ng-controller = "myctrl"> ชื่อ: <อินพุต ng-model = "name"> {{name}} <button ng-click = "show ()"> shoname </button> </div>JS ที่สอดคล้องกัน
<script> var app = angular.module ('myapp', []); app.controller ('myctrl', ฟังก์ชั่น ($ scope) {$ scope.show = function () {console.log ($ scope.name); // AllPRPOS (OBJ) {// ใช้เพื่อบันทึกชื่อแอตทริบิวต์และค่าทั้งหมด var props = ""; obj [p] + ";";}} // ในที่สุดคุณสมบัติทั้งหมดจะแสดง console.log (อุปกรณ์ประกอบฉาก);โดยการพิมพ์วัตถุ $ SCOPE คุณจะเห็นว่าคุณสมบัติของมันมีชื่อคู่คีย์-ค่า แต่เมื่อเราอยู่ในโครงการไอออนิกเราก็มีเช่นนี้:
Demo2
<ion-view view-title = "chats"> <ion-content> <div> ชื่อ: <อินพุต ng-model = "name"> {{name}} <button ng-click = "show ()"> shoname </button> </div>chatsctrl ที่เกี่ยวข้องในคอนโทรลเลอร์ที่สอดคล้องกัน js ของไอออนิก:
Angular.module ('Starter.Controllers', []). คอนโทรลเลอร์ ('chatsctrl', ฟังก์ชั่น ($ scope) {$ scope.show = function () {console.log ($ scope.name); // คอนโซลพิมพ์คอนโซลที่ไม่ได้กำหนดไม่พบชื่อในคุณสมบัติ $ SCOPE ที่พิมพ์ออกมา คอนโซลที่พิมพ์ไม่ได้กำหนด แต่ {{name}} บนหน้าสามารถส่งออกได้ตามปกติ ทำไมถึงเป็นเช่นนี้? มีการประเมินว่าผู้เริ่มต้นไอออนิกจำนวนมากได้พบกับสถานการณ์นี้ในโครงการของพวกเขา ข้อมูลสองทางของ AngularJS มีผลผูกพันไม่ถูกต้องในอิออนหรือไม่? ถ้าฉันเขียนด้วยวิธีนี้:
Demo3
<ion-view view-title = "chats"> <ion-content ng-controller = "mychatctrl"> <div> ชื่อ: <อินพุต ng-model = "ชื่อ"> {{name}} <button ng-click = "show ()"> Shonameกำหนด mychatctrl ใหม่ใน controller.js:
Angular.Module ('Starter.Controllers', []). คอนโทรลเลอร์ ('myChatCtrl', ฟังก์ชั่น ($ scope) {$ scope.show = function () {// คลิกปุ่มคอนโซล log ($ scope.name); // corsole สามารถพิมพ์ค่าในกล่องอินพุตด้วยวิธีนี้ทุกคนควรได้เห็นเบาะแสบางอย่าง ในความเป็นจริงรากของปัญหาทั้งหมดคือขอบเขต เมื่อใช้คำสั่ง Directive เช่น NG-Model, NG-Repeat ฯลฯ มันจะสร้างขอบเขตตัวเอง ในความเป็นจริงสิ่งนี้เกี่ยวข้องกับช่วงเวลาของการสร้างคอนโทรลเลอร์ไอออนิก ขอบเขตของขอบเขตการควบคุมที่สร้างขึ้นในเส้นทางมุมมองไอออนิกนั้นใหญ่กว่าขอบเขตของขอบเขต mychatctrl ใน Demo2 ด้านล่าง ปรากฎว่าขอบเขตทั้งสองนี้แตกต่างกันซึ่งอธิบายว่าทำไมค่าที่ได้จาก DEMO2 ข้างต้นถึงไม่ได้กำหนด ฉันพบปัญหาถ้าฉันแก้ปัญหานี้
ขอบเขตขอบเขตสามารถสืบทอดได้และคุณสมบัติของวัตถุ JS ได้รับการสืบทอดด้วยดังนั้นเราจึงสามารถเปลี่ยน DEMO2 ได้เล็กน้อยและกำหนดค่าเริ่มต้นใน chatSctrl ตอนนี้: ตอนนี้:
var $ scope.name = {text: ""};
อินพุต NG-Model บนหน้า:
<ion-view view-title = "chats"> <ion-content ng-controller = "mychatctrl"> <div> ชื่อ: <อินพุต ng-model = "name.text"> {{name}} <button ng-click = "show ()"> Shonameหลังจากทำสิ่งนี้แล้วให้คลิกที่ปุ่มและพบว่าค่าของ $ scope.name สามารถพิมพ์ได้ตามปกติ หากคุณไม่ต้องการใช้คุณสมบัติของวัตถุในการทำเช่นนี้คุณสามารถผูกมันไว้กับขอบเขตของขอบเขตหลักเมื่อมีผลผูกพันและ CTRL ของ DEMO2 ยังคงไม่เปลี่ยนแปลงและรหัสในหน้าจะเปลี่ยนเป็นต่อไปนี้:
<ion-view view-title = "chats"> <ion-content ng-controller = "mychatctrl"> <div> ชื่อ: <อินพุต ng-model = "$ parent.name"> {{name}} <button ng-click = "show ()"> shoname </button>สิ่งนี้จะได้รับค่าของ $ scope.name และปัญหาได้รับการแก้ไข หากปัญหานี้เกิดขึ้นสามารถทำได้เหมือนกัน หากคุณมีวิธีแก้ปัญหาอื่น ๆ โปรดฝากข้อความไว้
บทความอ้างอิง
โมเดล NG ของ Ionic ไม่สามารถรับปัญหาค่าได้
เข้าใจขอบเขตของ AngularJs
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น