Ionenmodell
$ ionicmodal
$ ionicmodal kann die Inhaltsbox der Hauptschnittstelle des Benutzers verdecken.
Sie können den folgenden Code in Ihre Indexdatei oder andere Dateien einbetten (der Code im Inneren kann gemäß Ihrem eigenen Geschäftsszenario geändert werden).
<script id = "my-modal.html" type = "text/ng-template"> <ion-modal-view> <ion-header-bar> <h1> Mein modaler Titel </h1> </Ion-Header-Bar> <Ion-Content> Hallo!
Dann können Sie $ ionicmodal in Ihren Controller injizieren. Rufen Sie dann die Vorlage an, die Sie gerade geschrieben haben, um den Initialisierungsvorgang durchzuführen. Genau wie der folgende Code:
Angular.module ('testApp', ['Ionic']). Controller ('MyController', Funktion ($ scope, $ ionicmodal) {$ ionicModal.fromTemPlateurl ('my-modal.html', {Scope: $ scope, Animation: Slide-in-up '}). modal;}); $ scope.openmodal = function () {$ scope.modal.show ();}; $ scope.closemodal = function () {$ scope.modal.hide ();}; // Das Modal, wenn wir mit ihm fertig sind! {$ scope.modal.remove ();}); // Aktion auf ausblenden modal $ scope.Verfahren
FromTemplate (Templatestring, Optionen)
| Parameter | Typ | Details |
|---|---|---|
| Templatestring | 字符串 | Die Zeichenfolge der Vorlage dient als Inhalt des Modells. |
| Optionen | 对象 | Optionen werden an die Ionicmodal#Initialize -Methode übergeben. |
FromTemplateurl (Templateurl, Optionen)
| Parameter | Typ | Details |
|---|---|---|
| Templateurl | 字符串 | Laden Sie die URL der Vorlage. |
| Optionen | 对象 | Geben Sie das Objekt durch die Ionicmodal#Initialize -Methode. |
Rückgabe: Versprechen Objekt. Das Versprechungsobjekt ist eine von der CommonJS -Arbeitsgruppe vorgeschlagene Spezifikation mit dem Ziel, eine einheitliche Schnittstelle für die asynchrone Programmierung bereitzustellen.
Ionicmodal
Instanziiert durch $ ionicmodal Service.
TIPP: Wenn Sie jedes Modul -Löschen abschließen, rufen Sie die Methode REMED () auf, um Speicherlecks zu vermeiden.
HINWEIS: Ein Modul überträgt 'modal.shown' und 'modal.hidden' aus seinem Anfangsbereich, der sich als Parameter übergibt.
Verfahren
initialisieren (optional)
Erstellen Sie ein neues Modell -Controller -Beispiel.
| Parameter | Typ | Details |
|---|---|---|
| Optionen | 对象 | Ein Optionsobjekt hat die folgenden Eigenschaften:
|
zeigen()
Modellinstanz anzeigen
Rückgabewert: Versprechen Versprechen, analysiert nach Abschluss des Modells die Animation
verstecken()
Das Modell verstecken.
Rückgabewert: Versprechen Versprechen, analysiert nach Abschluss des Modells die Animation
entfernen()
Entfernen Sie die Modellinstanz aus dem DOM und reinigen Sie es.
Rückgabewert: Versprechen Versprechen, analysiert nach Abschluss des Modells die Animation
isShown ()
Rückgabe: Boolescher Wert, verwendet, um festzustellen, ob das Modell angezeigt wird.
Beispiel
HTML -Code
<html ng-App = "IonicApp"> <head> <meta charset = "utf-8"> <meta name = "viewPort" content = "initial-scale = 1, maximal-scale = 1, user-scalable = nein, width = device-width"> <titels> Rookie Tutorial (runoob.com) </title> </title> </title> </title> </title> </title> </title> < href = "http://www.runoob.com/static/ionic/css/ionic.min.csss" rel = "stylesheet"> <script src = "http://www.runoob.com/static/ionic/js/ionic.min.min.min.min.min.js" ng-controller = "appctrl"> <Ion-Header-Bar> <h1> Kontakte </h1> <div> <button ng-klick = "modal.show ()"> </button> </div> </ion-header-bar> <ion-content> <Ion-list> <ion-item-item-item-item-item-item-item nge-repeat = "content> <Ion-list> <Ion-item-item-item-item nge-repeat =" content> <Ion-list> <ion-item-item-item nge-repet 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>CSS -Code
Body {Cursor: URL ('http://www.runoob.com/try/demo_source/finger.png'), auto;}JavaScript -Code
Angular.module ('IonicApp', ['Ionic']). Controller ('AppCtrl', Funktion ($ scope, $ ionicmodal) {$ scope.contacts = [{name: 'gordon freeman'}, {name: 'barney calhoun'}, {name: 'lamarr the Headcrab' }. }); $ scope.modal.hide ();};});Komplette Quellcode:
<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></title><link href = "http://cdn.bootcs.com/ionic/1.0.1/css/ionic.min.css" rel = "stylesheet"> <script src = "http://cdn.bootcs.com/ionic/1.1/js/ionic.buncle.bundle.min.min.min.min.js {Cursor: url ('http://ionicframework.com/img/finger.png'), Auto; }, {name: 'barney calhoun'}, {name: 'lamarr the headcrab'},]; $ scope.contacts.push ({name: u.firstname + '' + u.lastName}); ng-klick = "modal.show ()"> </button> </div> </ion-header-bar> <ion-content> <ionlist> <ion-item ng-repeat = "Kontakt in Kontakten"> {{contact.name}} </ion-item> </modal-list> </iion-content> </modal.html-list> </iion-content> </modal. 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> Nachname </span> <input ng-model = "newUser.lastname" type = "text"> </label> <label> <span> E-Mail </span> <Eingabe ng-model = "newuser.email" type = "text ng-klick = "createContact (newUser)"> create </button> </div> </ion-content> </ion-modal-view> </script> </body> </html>