แบบจำลองไอออนิก
$ 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 ('modal.html', {scope: $ scope modal;}); $ scope.openmodal = function () {$ scope.modal.show ();}; $ scope.closemodal = function () {$ scope.modal.hide ();}; // ทำความสะอาด modal เมื่อเราทำมัน! {$ scope.modal.remove ();}); // ดำเนินการดำเนินการบนซ่อน modal $ scope. $ on ('modal.hidden', function () {// ดำเนินการ}); // ดำเนินการกระทำบนลบ $ modal $ on ('modal.removed', ฟังก์ชั่น ()วิธี
FromTemplate (Templatestring ตัวเลือก)
| พารามิเตอร์ | พิมพ์ | รายละเอียด |
|---|---|---|
| เทมพลาเทอร์ | 字符串 | สตริงของเทมเพลตทำหน้าที่เป็นเนื้อหาของโมเดล |
| ตัวเลือก | 对象 | ตัวเลือกจะถูกส่งผ่านไปยังวิธี ionicmodal#เริ่มต้น |
fromtemplateurl (templateurl, ตัวเลือก)
| พารามิเตอร์ | พิมพ์ | รายละเอียด |
|---|---|---|
| เทมเพลต | 字符串 | โหลด URL ของเทมเพลต |
| ตัวเลือก | 对象 | ส่งผ่านวัตถุผ่านวิธี ionicmodal#เริ่มต้น |
Return: Promise Object วัตถุสัญญาเป็นข้อกำหนดที่เสนอโดยคณะทำงาน CommonJS โดยมีวัตถุประสงค์เพื่อให้อินเทอร์เฟซแบบครบวงจรสำหรับการเขียนโปรแกรมแบบอะซิงโครนัส
อิออนโมดอล
อินสแตนซ์โดยบริการ $ ionicmodal
เคล็ดลับ: เมื่อคุณทำการล้างแต่ละโมดูลให้แน่ใจว่าได้เรียกใช้วิธีการลบ () เพื่อหลีกเลี่ยงการรั่วไหลของหน่วยความจำ
หมายเหตุ: โมดูลออกอากาศ 'modal.shown' และ 'modal.hided' จากช่วงเริ่มต้นผ่านตัวเองเป็นพารามิเตอร์
วิธี
เริ่มต้น (ไม่บังคับ)
สร้างตัวอย่างคอนโทรลเลอร์รุ่นใหม่
| พารามิเตอร์ | พิมพ์ | รายละเอียด |
|---|---|---|
| ตัวเลือก | 对象 | วัตถุตัวเลือกมีคุณสมบัติดังต่อไปนี้:
|
แสดง()
แสดงอินสแตนซ์ของโมเดล
ค่าส่งคืน: Promise Promise Object, แยกวิเคราะห์หลังจากโมเดลเสร็จสิ้นการเคลื่อนไหว
ซ่อน()
ซ่อนโมเดล
ค่าส่งคืน: Promise Promise Object, แยกวิเคราะห์หลังจากโมเดลเสร็จสิ้นการเคลื่อนไหว
ลบ()
ลบอินสแตนซ์รุ่นออกจาก DOM และทำความสะอาด
ค่าส่งคืน: Promise Promise Object, แยกวิเคราะห์หลังจากโมเดลเสร็จสิ้นการเคลื่อนไหว
Isshown ()
return: ค่าบูลีนใช้เพื่อตรวจสอบว่าโมเดลจะปรากฏขึ้นหรือไม่
ตัวอย่าง
รหัส HTML
<html ng-app = "ionicapp"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "เริ่มต้นระดับเริ่มต้น = 1, ระดับสูงสุด = 1, ผู้ใช้-scalable = no, width = ความกว้างของอุปกรณ์"> <title> 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.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min ng-controller = "appctrl"> <ion-header-bar> <h1> ผู้ติดต่อ </h1> <div> <button ng-click = "modal.show ()"> </djut ผู้ติดต่อ "> {{contact.name}} </ion-item> </ion-list> </ion-content> <script id =" templates/modal.html "type =" text/ng-template " ng-click = "modal.hide ()"> ยกเลิก </button> </ion-header-bar> <ion-content> <darm> <dable> <span> ชื่อแรก </span> <อินพุต ng-model = "newuser.firstname" type = "text text"> type = "text"> </label> <dable> <pan> อีเมล </span> <อินพุต ng-model = "newuser.email" type = "text"> </label> <button ng-click = "createContact (newuser)"รหัส CSS
ร่างกาย {เคอร์เซอร์: url ('http://www.runoob.com/try/demo_source/finger.png'), auto;}รหัส JavaScript
Angular.module ('Ionicapp', ['Ionic']). คอนโทรลเลอร์ ('AppCtrl', ฟังก์ชั่น ($ scope, $ ionicmodal) {$ scope.contacts = [{ชื่อ: 'Gordon Freeman'}, {ชื่อ: 'Barney Calhoun' },]; $ ionicmodal.fromTemplateurl ('แม่แบบ/modal.html', {scope: $ scope}). จากนั้น (ฟังก์ชั่น (modal) {$ spope.modal = modal;}); $ scope.cope.cope }); $ scope.modal.hide ();};});ซอร์สโค้ดที่สมบูรณ์:
<html ng-app = "ionicapp"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "เริ่มต้นระดับ = 1, ระดับสูงสุด = 1 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 {เคอร์เซอร์: url ('http://ionicframework.com/img/finger.png'), auto;} </style> <script> angular.module ('ionicapp', ['ionic']. controller ('appctrl', ฟังก์ชั่น }, {ชื่อ: 'barney calhoun'}, {ชื่อ: 'lamarr the headcrab'},]; $ ionicmodal.fromtemplateurl ('templates/modal.html', {scope: $ scope}) $ scope.contacts.push ({ชื่อ: u.firstname + '' + u.lastname}); $ scope.modal.hide ();};}); </script> </head> <body ng-controller = "AppCtrl"> < ng-click = "modal.show ()"> </button> </div> </ion-header-bar> <ion-content> <ion-list> <ion-item ng-repeat = "ติดต่อในผู้ติดต่อ"> {{contact.name}} </ion-item> type = "text/ng-template"> <ion-modal-view> <ion-header-bar> <h1> ผู้ติดต่อใหม่ </h1> <button ng-click = "modal.hide ()"> ยกเลิก </button> </ion-header-bar> type = "text"> </label> <dable> <pan> นามสกุล </span> <อินพุต ng-model = "newuser.lastname" type = "text"> </label> <man> <span> อีเมล </span> <อินพุต ng-model = "newuser.email" type = "text"> ng-click = "createContact (newUser)"> สร้าง </button> </div> </ion-content> </ion-modal-view> </script> </body> </html>