عند استخدام نموذج NG في الأيوني اليوم ، تكون القيمة التي تم الحصول عليها في وحدة التحكم المقابلة غير محددة. اعتدت أن أحصل عليها عند استخدام ربط النموذج ng hoslegs 'ng ، وهو أمر محرج وقررت معرفة ذلك. دعونا نلقي نظرة على عرض تجريبي أدناه.
عند تعلم الربط ثنائي الاتجاه للبيانات لـ AngularJS ng-model ، نحصل على قيمة نموذج NG المقابلة من خلال الكود التالي:
DEMO1
<div ng-app = "myapp" ng-controller = "myctrl"> الاسم: <input ng-model = "name"> {{name}} <button ng click = "show ()"المقابلة ي
<script> var app = Angular.Module ('myapp' ، []) ؛ app.controller ('myctrl' ، function ($ scope) {$ scope.show = function () {console.log ($ scope.name) ؛ allpros (obj) {// المستخدمة لحفظ جميع أسماء السمات var props = "" ؛ OBJ [p] + "؛" ؛من خلال طباعة كائن نطاق $ ، يمكنك أن ترى أن خصائصه تحتوي على زوج من القيمة الرئيسية. ولكن عندما كنا في المشروع الأيوني ، حصلنا عليه أيضًا على هذا النحو:
Demo2
<ion-view view-title = "chats"> <ion-content> <viv> الاسم: <input ng-model = "name"> {{name}} <button ng-click = "show ()"chatsctrl المقابل في وحدة التحكم المقابلة.
Angular.Module ('starter.controllers' ، []). Controller ('chatsctrl' ، function ($ scope) {$ scope.show = function () {console.log ($ scope.name) ؛لم يتم العثور على اسم في خاصية Scope المطبوعة. طبعت وحدة التحكم غير محددة ، ولكن يمكن إخراج {{name}} على الصفحة بشكل طبيعي. لماذا هذا؟ تشير التقديرات إلى أن العديد من المبتدئين الأيونيين واجهوا هذا الموقف في مشاريعهم. هل بيانات AngularJS في اتجاهين غير صالحة في الأيوني؟ إذا كتبت بهذه الطريقة:
Demo3
<ion-view view-title = "chats"> <ion-content ng-controller = "mychatctrl"> <viv> الاسم: <input ng-model = "name"> {{name}} <button ng click = "show ()"إعادة تعريف mychatctrl في controller.js:
Angular.Module ('starter.controllers' ، []). Controller ('mychatctrl' ، function ($ scope) {$ scope.show = function () {// click button console.log ($ scope.name) ؛وبهذه الطريقة ، كان ينبغي على الجميع رؤية بعض القرائن. في الواقع ، جذر جميع المشاكل هو النطاق. عند استخدام أوامر توجيهية مثل NG-Model ، NG-Repeat ، وما إلى ذلك ، فإنه سيخلق نطاقًا نفسه. في الواقع ، هذا ينطوي على توقيت خلق وحدة تحكم أيونية. نطاق نطاق التحكم الذي تم إنشاؤه في مسار العرض الأيوني أكبر من نطاق نطاق mychatctrl في العرض التوضيحي 2 أدناه ؛ اتضح أن هذين النطاقين مختلفان ، وهو ما يفسر سبب عدم تحديد القيمة التي تم الحصول عليها بواسطة Demo2 أعلاه. لقد وجدت مشكلة ، ماذا لو حللت هذه المشكلة؟
يمكن مورث نطاق النطاق ، وترث خصائص كائن JS أيضًا ، حتى نتمكن من تغيير Demo2 قليلاً وتحديد القيمة الافتراضية في chatsctrl الآن:
var $ scope.name = {text: ""} ؛
إدخال النموذج NG على الصفحة:
<ion-view view-title = "chats"> <ion-content ng-controller = "mychatctrl"> <viv> الاسم: <input ng-model = "name.text"> {{name}} <button ng-click = "show ()"بعد القيام بذلك ، انقر فوق الزر وابحث عن أن قيمة scope.name يمكن طباعتها بشكل طبيعي. إذا كنت لا ترغب في استخدام خصائص الكائن للقيام بذلك ، فيمكنك ربطها بنطاق نطاق الوالدين عند الربط ، وتبقى CTRL من DEMO2 دون تغيير ، ويتم تغيير الرمز الموجود في الصفحة إلى ما يلي:
<ion-view view-title = "chats"> <ion-content ng-controller = "mychatctrl"> <viv> الاسم: <input ng-model = "$ parent.name"> {{name}} <button nglick = "show ()سيحصل هذا أيضًا على قيمة $ scope.name ، ويتم حل المشكلة. في حالة حدوث هذه المشكلة ، يمكن القيام الشيء نفسه. إذا كان لديك أي حلول أخرى ، فيرجى ترك رسالة.
مقالة مرجعية
لا يمكن أن يحصل النموذج NG الخاص بـ Ionic على مشكلة القيمة
فهم نطاق AngularJS
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.