model ionik
$ ionikmodal
$ ionicmodal dapat mengaburkan kotak konten antarmuka utama pengguna.
Anda dapat menyematkan kode berikut dalam file indeks Anda atau file lain (kode di dalam dapat diubah sesuai dengan skenario bisnis Anda sendiri).
<script id = "my-modal.html" type = "text/ng-template"> <ion-podal-view> <ion-header-bar> <h1> judul modal saya </h1> </ion-header--Bar> <ion-content> halo! </ion-con-con-coonent> </ion-modal-
Kemudian Anda dapat menyuntikkan $ ionicmodal ke dalam pengontrol Anda. Kemudian hubungi templat yang baru saja Anda tulis untuk melakukan operasi inisialisasi. Sama seperti kode berikut:
angular.module ('testApp', ['ionic']). controller ('mycontroller', function ($ scope, $ ionicmodal) {$ ionicmodal.fromTemplateUrl ('my-modal.html', {scope: $ scope, animation: 'slide-up' {{slide '{slide' {slide ') ($ scope-up modal;}); $ scope.openmodal = function () {$ scope.modal.show ();}; $ scope.closemodal = function () {$ scope.modal.hide ();}; // Bersihkan modal ketika kita selesai dengan itu! $ scope. $ on (', $ function', $ function ', $ {$ scope.modal.remove ();}); // Jalankan tindakan pada sembunyikan modal $ scope. $ on ('modal.hidden', function () {// menjalankan tindakan}); // jalankan tindakan pada hapus modal $ scope. $ on ('modal.removed', function () {// execute action.metode
FromTemplate (TemplateString, Opsi)
| parameter | jenis | Detail |
|---|---|---|
| TemplateString | 字符串 | String templat berfungsi sebagai konten model. |
| opsi | 对象 | Opsi diteruskan ke metode ionicmodal#initialize. |
FromTemplateUrl (TemplateUrl, Opsi)
| parameter | jenis | Detail |
|---|---|---|
| TemplateUrl | 字符串 | Muat URL templat. |
| opsi | 对象 | Lewati objek melalui metode ionicmodal#initialize. |
Return: Janji Objek. Objek janji adalah spesifikasi yang diusulkan oleh kelompok kerja CommonJS, dengan tujuan menyediakan antarmuka terpadu untuk pemrograman asinkron.
ionikmodal
Dipakai oleh layanan $ ionikmodal.
Kiat: Saat Anda menyelesaikan setiap pembersihan modul, pastikan untuk memanggil metode lepas () untuk menghindari kebocoran memori.
Catatan: Modul menyiarkan 'modal.shown' dan 'modal.hidden' dari rentang awalnya, melewati dirinya sebagai parameter.
metode
inisialisasi (opsional)
Buat contoh pengontrol model baru.
| parameter | jenis | Detail |
|---|---|---|
| opsi | 对象 | Objek opsi memiliki properti berikut:
|
menunjukkan()
Contoh model tampilan
Nilai pengembalian: objek janji janji, diurai setelah model menyelesaikan animasi
bersembunyi()
Sembunyikan modelnya.
Nilai pengembalian: objek janji janji, diurai setelah model menyelesaikan animasi
menghapus()
Lepaskan contoh model dari DOM dan bersihkan.
Nilai pengembalian: objek janji janji, diurai setelah model menyelesaikan animasi
isshown ()
Return: Nilai boolean, digunakan untuk menentukan apakah model ditampilkan.
Contoh
Kode HTML
<html ng-app = "ionicApp"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "initial-scale = 1, maksimum-scale = 1, skalaum pengguna = tidak, width = device-width"> <title> tutorial rookie (runoob.com) </title> <tautan href = "http://www.runoob.com/static/ionic/csss/ionic.min.css" rel = "stylesheet"> <script src = "http://www.runoob.com/static/ionic/js/ionic.bundle.min.min.min ng-controller = "appctrl"> <ion-header-bar> <h1> kontak </h1> <v Div> <button ng-click = "modal.show ()"> </button> </div> </ion-header-bar> <ion-content> <ion-list> <ion-ng ng ng = "content- content> <ion-list> <ion-item ng ng ng ng = ion-content> <ion-list> contacts">{{contact.name}}</ion-item></ion-list></ion-content><script id="templates/modal.html" type="text/ng-template"><ion-modal-view><ion-header-bar><h1>New Contact</h1><button ng-click="modal.hide()">Cancel</button></ion-header-bar><ion-content><div><label><span>First Name</span><input ng-model="newUser.firstName" type="text"></label><label><span>Last Name</span><input ng-model="newUser.lastName" type="text"></label><label><span>Email</span><input ng-model="newUser.email" type="text"></label><button ng-click="createContact(newUser)">Create</button></div></ion-content></ion-modal-view></script></body></html>Kode CSS
Body {cursor: url ('http://www.runoob.com/try/demo_source/finger.png'), auto;}Kode JavaScript
angular.module ('ionicapp', ['ionic']). controller ('appctrl', function ($ scope, $ ionicmodal) {$ scope.contacts = [{{name: 'gordon freeman'}, {name: 'Barney Calhoun'}, {name: ' },]; $ ionicmodal.fromTemplateUrl ('templat/modal.html', {scope: $ scope}). Kemudian (function (modal) {$ scope.modal = modal;}); $ scope.createContact = function (u) {$ scope.coptact. }); $ scope.modal.hide ();};});Kode Sumber Lengkap:
<html ng-app = "ionicApp"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "skala awal = 1, skala maksimum = 1, skala pengguna = tidak, lebar =-device-width"> <title> </title> <tautan 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 {cursor: url ('http://ionicframework.com/img/finger.png'), auto;} </tyle> <script> angular.module ('ionicapp', ['ionic']. Controller ('appctrl', function ($ scope, $ ionicmodal ') {scopeact $ ($ scope. }, {name: 'Barney calhoun'}, {name: 'laMarr the headcrab'},]; $ ionicmodal.fromTemplateUrl ('templat/modal.html', {scope: $ scope}). kemudian (function (modal) {$ scope.modal = scope {$ (function). $scope.contacts.push({ name: u.firstName + ' ' + u.lastName });$scope.modal.hide();};});</script></head><body ng-controller="AppCtrl"><ion-header-bar><h1>Contacts</h1><div><button NG-klik = "Modal.show ()"> </button> </div> </ion-header-bar> <ion-content> <ion-list> <penai-item ng-repeat = "kontak di kontak"> {{contact.name}} </ion-item> </ion-list> </{{oPon} </ion-item> </ion-list> </oon-content <" type = "text/ng-template"> <ion-podal-view> <ion-header-bar> <h1> Kontak baru </h1> <button ng-click = "Modal.hide ()"> Batal </button> </ion-header-Bar> <ion-content> <von> <lan-span> </name. type = "text"> </label> <label> <span> Nama belakang </span> <input ng-model = "newUser.lastname" type = "text"> </label> <label> <span> email </span> <input ng-model = "newUser.email" type = "text"> </label> <putute> tombol = "newUser.email" type = "text"> </label> tombol </label> ng-click = "createContact (newUser)"> Buat </button> </div> </ion-content> </ion-podal-view> </script> </body> </html>