نموذج أيوني
$ ionicmodal
$ ionicmodal يمكن أن يحجب مربع المحتوى للواجهة الرئيسية للمستخدم.
يمكنك تضمين الكود التالي في ملف الفهرس أو الملفات الأخرى (يمكن تغيير الرمز الموجود في الداخل وفقًا لسيناريو عملك الخاص).
<script id = "my-modal.html" type = "text/ng-template"> <ion-modal-view> <ion-header-bar> <h1> عنوان الخاص بي الوسيط </h1> </ion-header-bar> <-ion-content> hello!
ثم يمكنك حقن $ ionicmodal في وحدة التحكم الخاصة بك. ثم اتصل بالقالب الذي كتبته للتو لأداء عملية التهيئة. تماما مثل الرمز التالي:
angular.module ('testApp' ، ['ionic']). وحدة التحكم ('myController' ، الدالة ($ scope ، $ ionicmodal) {$ ionicmodal.fromtemplateurl ('my-modal.html' ، {spece: $ spication ، anim-up-} Modal ؛}) ؛ $ scope.openmodal = function () {$ spece.modal.show () ؛} ؛ $ specte.closemodal = function () {$ scope.modal.hide () ؛} ؛ {$ scope.modal.remove () ؛}) ؛ // تنفيذ الإجراء على إخفاء نطاق $ $. $ على ('modal.hidden' ، function () {// execute action}) ؛طريقة
FromTemplate (TemplateString ، خيارات)
| المعلمة | يكتب | تفاصيل |
|---|---|---|
| TemplateString | 字符串 | تعمل سلسلة القالب كمحتوى للنموذج. |
| خيارات | 对象 | يتم تمرير الخيارات إلى طريقة تهيئة IonicModal#. |
fromtemplateurl (templateurl ، الخيارات)
| المعلمة | يكتب | تفاصيل |
|---|---|---|
| templateurl | 字符串 | تحميل عنوان URL للقالب. |
| خيارات | 对象 | تمرير الكائن من خلال طريقة تهيئة IonicModal#. |
العودة: كائن الوعد. كائن الوعود هو المواصفات التي اقترحتها مجموعة عمل CommonJS ، مع الغرض من توفير واجهة موحدة للبرمجة غير المتزامنة.
الأيوني
تم إنشاءه بواسطة $ ionicmodal Service.
نصيحة: عند إكمال كل وحدة مسح ، تأكد من استدعاء طريقة REMOME () لتجنب تسرب الذاكرة.
ملاحظة: تبث الوحدة النمطية "Modal.shown" و "Modal.hidden" من نطاقها الأولي ، تمر كمعلمة.
طريقة
تهيئة (اختياري)
قم بإنشاء مثال جديد على وحدة تحكم النموذج.
| المعلمة | يكتب | تفاصيل |
|---|---|---|
| خيارات | 对象 | يحتوي كائن الخيار على الخصائص التالية:
|
يعرض()
عرض مثيل نموذج
قيمة الإرجاع: كائن وعد الوعد ، تم تحليله بعد إكمال النموذج الرسوم المتحركة
يخفي()
إخفاء النموذج.
قيمة الإرجاع: كائن وعد الوعد ، تم تحليله بعد إكمال النموذج الرسوم المتحركة
يزيل()
قم بإزالة مثيل النموذج من DOM وقم بتنظيفه.
قيمة الإرجاع: كائن وعد الوعد ، تم تحليله بعد إكمال النموذج الرسوم المتحركة
isShown ()
الإرجاع: قيمة منطقية ، تستخدم لتحديد ما إذا كان يتم عرض النموذج.
مثال
رمز HTML
<html ng-app = "ionicapp"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "initial-scale = 1 ، maximum-scale = 1 ، user-scalable = no ، width = device-width"> <title> rokie tutorial (runoob.com) href = "http://www.runoob.com/static/ionic/css/ionic.min.css" rel = "stylesheet"> <script src = "http://www.runoob.com/static/ionic/js/ionic.bundle.min ng-controller = "appctrl"> <ion-header-bar> <h1> جهات اتصال </h1> <viv> <button ng click = "modal.show ()"> </dult> </div> </ion-header-bar> <ion-content> جهات الاتصال "> {{contact.name}} </ion-item> </on-list> </os-content> <script id =" templates/modal.html "type =" text/ng-template "> <ion-modal-view> ng-click = "modal.hide ()"> إلغاء </button> </ion-header-bar> <ion-content> <viv> <blable> <span> الاسم الأول </span> <input ng-model = "newuser.firstname" type = "text"> </label> <span> last name> type = "text"> </sably> <label> <span> البريد الإلكتروني </span> <input ng-model = "newUser.email" type = "text"> </bally> <button ng-click = "createContact (newUser)"رمز CSS
body {cursor: url ('http://www.runoob.com/try/demo_source/finger.png') ، auto ؛}رمز JavaScript
angular.module ('ionicapp' ، ['ionic']). وحدة التحكم ('appctrl' ، الدالة ($ scope ، $ ionicmodal) {$ $ scope.contacts = [{name: 'gordon freeman'} ، {name: 'barney calhoun'} ، } ،] ؛ $ ionicmodal.fromtemplateUrl ('templates/modal.html' ، {scope: $ scope}). }) ؛ $ scope.modal.hide () ؛} ؛}) ؛رمز المصدر الكامل:
<html ng-app = "ionicapp"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "initial-scale = 1 ، maximum-scale = 1 ، user-scalable = no ، width = device-width"> <bitle> </title> <link> HREF = "http://cdn.bootcss.com/ionic/1.0.1/css/ionic.min.css" rel = "stylesheet"> <script src = "http://cdn.bootcss.com/ionic/1.0.1/js/ionic.bundle.min {cursor: url ('http://ionicframework.com/img/finger.png') ، auto ؛} </style> <script> Angular.Module ('ionicapp' ، ['ionic'] Freeman '} ، {name:' Barney calhoun '} ، {name:' lamarr the Headcrab '} ،] ؛ $ ionicmodal.fromtemplateurl (' templates/modal.html '، {scope: $ scope}). {$ scope.contacts.push ({name: u.firstName + '' + U.LastName}) ؛ $ scope.modal.hide () ؛ ng-click = "modal.show ()"> </button> </viv> </ion-header-bar> <-ion-content> <ion-lister> <ion-item ng-repeat = "contact in consists"> {{contact.name}} </ion-item> </on-list> type = "text/ng-template"> <ion-modal-view> <ion-Header-Bar> <h1> جهة اتصال جديدة </h1> <button ng-click = "modal.hide ()" type = "text"> </sably> <label> <span> الاسم الأخير </span> <input ng-model = "newUser.lastname" type = "text"> </bably> <label> <span> البريد الإلكتروني </span> <input ng-model = "newUser.email" type = "text" ng-click = "createContact (newUser)"> إنشاء </button> </viv> </ion-content> </ion-modal-view> </script> </body> </html>