Le modèle ionic js $ ionicmodal peut bloquer la boîte de contenu de l'interface principale de l'utilisateur

Auteur：Eve Cole Date de mise à jour：2025-08-02 10:32:02

modèle ionique

$ ionicmodal

$ ionicModal peut masquer la boîte de contenu de l'interface principale de l'utilisateur.

Vous pouvez intégrer le code suivant dans votre fichier d'index ou d'autres fichiers (le code à l'intérieur peut être modifié en fonction de votre propre scénario commercial).

 <script id = "my-modal.html" type = "text / ng-template"> <ion-modal-view> <ion-header-bar> <h1> mon titre modal </h1> </ ion-header-bar> <ion-content> bonjour! </ ion-contenu>

Ensuite, vous pouvez injecter $ ionicModal dans votre contrôleur. Ensuite, appelez le modèle que vous venez d'écrire pour effectuer l'opération d'initialisation. Tout comme le code suivant:

 angular.module ('TestApp', ['ionic']). Controller ('MyController', fonction ($ scope, $ ionicModal) {$ ionicModal.fromTemplateUrl ('My-Modal.html', {Scope: $ Scope, "Slide-in-up"). modal;}); $ scope.openmodal = function () {$ scope.modal.show ();}; $ scope.closemodal = function () {$ scope.modal.hide ();}; // nettoyer le modal lorsque nous sommes fini avec elle! $ Scope. $ On ('$ destruct', fonction () gens

méthode

FromTemplate (Templatestring, Options)

paramètre	taper	Détails
template	`字符串`	La chaîne du modèle sert de contenu du modèle.
options	`对象`	Les options sont transmises à la méthode IonicModal # Initialize.

Renvoie: objet, une instance d'un contrôleur ionicmodal.

FromTemplateUrl (TemplateUrl, Options)

paramètre	taper	Détails
templateUrl	`字符串`	Chargez l'URL du modèle.
options	`对象`	Passez l'objet à travers la méthode IonicModal # Initialiser.

Retour: Promesse objet. L'objet Promise est une spécification proposée par le groupe de travail CommonJS, dans le but de fournir une interface unifiée pour la programmation asynchrone.

ionique

Instancié par $ ionicModal Service.

Astuce: Lorsque vous terminez chaque compensation du module, assurez-vous d'appeler la méthode Suppor () pour éviter les fuites de mémoire.

Remarque: un module diffuse «modal.shown» et «modal.hidden» de sa plage initiale, se transformant en tant que paramètre.

méthode

Initialiser (facultatif)

Créez un nouvel exemple de contrôleur de modèle.

paramètre	taper	Détails
options	`对象`	Un objet d'option a les propriétés suivantes: `{object=}` Scope de `范围`. Par défaut: Créez une sous-classe Rootscope $. `{string=}` `动画`avec des animations affichées ou cachées. Par défaut: «diapositive» `{boolean=}` `第一个输入框获取焦点`Lorsqu'il est affiché, si le premier élément d'entrée du modèle est automatiquement mis au point. Par défaut: false. `{boolean=}` backdropClickToclose` s'il faut fermer le modèle lorsque vous cliquez sur l'arrière-plan. Par défaut: true.

montrer()

Instance de modèle d'affichage

Valeur de retour: Promise Promise Object, analysé une fois le modèle terminé l'animation

cacher()

Masquer le modèle.

Valeur de retour: Promise Promise Object, analysé une fois le modèle terminé l'animation

retirer()

Retirez l'instance du modèle du DOM et nettoyez-la.

Valeur de retour: Promise Promise Object, analysé une fois le modèle terminé l'animation

iSShown ()

Retour: valeur booléenne, utilisée pour déterminer si le modèle est affiché.

Exemple

Code html

 <html ng -pp = "ionicApp"> <éadf> <meta charset = "utf-8"> <meta name = "Viewport" contenu = "initial-scale = 1, maximum-scale = 1, user-scalable = no, width = device-width"> <ititle> tutoriel rookie (runoob.com) </title> <lien " 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.js"> </ script> Ng-Controller = "AppCtrl"> <ion-Header-Bar> <H1> CONTACTS </H1> <div> <Button ng-Click = "modal.show ()"> </ Button> </div> <ion-Header> <ion-Content> <ion-list> CONTACTS "> {{Contact.name}} </ ion-item> </ion-list> </ ion-content> <script id =" Modèles / modal.html "type =" Text / ng-template "> </ h1> <Button> <ion-header-bar> 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> <Babed> <span> Email </span> <entrée ng-model = "NewUser.Email" type = "Text"> </ Button> <Button ng-Click = "CreateContact (NewUser)"> Create </ Button> </div> </ Ion-Content> </ ion-Modal-View> </cript> </dom> </html>

Code CSS

 Body {Cursor: URL ('http://www.runoob.com/try/demo_source/finger.png'), auto;}

Code javascript

 Angular.module ('ionicApp', ['ionic']). Controller ('AppCtrl', fonction ($ Scope, $ ionicModal) {$ Scope.Contacts = [{name: 'Gordon Freeman'}, {name: 'Barney Calhoun'}, {name: 'Lamarr The Headcrab' },]; $ ionicModal.fromTemplateUrl ('Templates / modal.html', {Scope: $ Scope}). puis (fonction (modal) {$ scope.modal = modal;}); $ scope.createContact = function (u) {$ Scope.Contact. }); $ scope.modal.hide ();};});

Code source complet:

 <html ng -pp = "ionicApp"> <éadf> <meta charset = "utf-8"> <meta name = "Viewport" contenu = "initial-scale = 1, maximum-scale = 1, user-scalable = no, width = device-width"> <title> </ 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.js"> </ script> {Cursor: URL ('http://ionicframework.com/img/finger.png'), auto;} </ style> <script> angular.module ('ionicApp', ['ionic']. Controller ('appctrl', function ($ Scope, $ ionicModal) {$ Scope.Conte }, {name: 'Barney Calhoun'}, {name: 'Lamarr le Headcrab'},]; $ ionicModal.fromTemplateUrl ('Templates / modal.html', {Scope: $ scope}). puis (fonction (modal) {$ scope.modal = modal;}); $ scope.createc $ scope.contacts.push ({name: u.FirstName + '' + u.lastName}); $ scope.modal.hide ();};}); </cript> </-head> <body ng-controller = "appctrl"> <ion-header> <h1> contacts </h1> <v> <Ion-Butter> ng-Click = "modal.show ()"> </ button> </div> </ ion-header-bar> <ion-content> <ion-list> <ion-item ng-repeat = "Contact in Contacts"> {{Contact.name}} </dion-item> </on-list> </on - -Cent> id = "Templates / modal.html" type = "text / ng-template"> <ion-modal-view> <ion-header-bar> <h1> nouveau contact </h1> <button ng-click = "modal.hide ()"> annuler </ bouton> </ ion-header> <ion-content> <v> ng-model = "newUser.firstname" type = "text"> </bold> <bellise> <span> nom de famille </span> <entrée ng-model = "newUser.lastName" type = "Text"> </ label> <label> email </ span> <entrée ng-model = "NewUser.email" type = "text"> </ label> ng-Click = "CreateContact (NewUser)"> Create </ Button> </div> </ ion-content> </ ion-modal-view> </cript> </body> </html>