modelo iónico
$ ionicmodal
$ IonicModal puede oscurecer el cuadro de contenido de la interfaz principal del usuario.
Puede integrar el siguiente código en su archivo de índice u otros archivos (el código interior se puede cambiar de acuerdo con su propio escenario comercial).
<script id = "my-modal.html" type = "text/ng-template"> <ion-modal-view> <ion-header-bar> <h1> mi modal título </h1> </ ion-header-bar> <ion-content> hello! </ ioncontent> </ion-modal-view> </script>
Entonces puede inyectar $ IonicModal en su controlador. Luego llame a la plantilla que acaba de escribir para realizar la operación de inicialización. Al igual que el siguiente código:
angular.module ('testApp', ['ionic']). Controller ('myController', function ($ scope, $ ionicModal) {$ ionicModal.fromTemplateUrl ('my-modal.html', {alcance: $ alcance, animación: 'deslizamiento'}). modal;}); $ scope.openmodal = function () {$ scope.modal.show ();}; $ scope.closemodal = function () {$ scope.modal.hide ();}; // Limpia el modal cuando estamos hechos con él! $ ACEPE. $ on ('$ destruye', function () {$ scope.modal.remove ();}); // ejecutar acción en ocultar modal $ scope. $ on ('modal.hidden', function () {// ejecute acción}); // ejecutar acción en eliminar modal $ scope. $ on ('modal.removed', function () {//cute action});});método
FromTemplate (TemplateString, Opciones)
| parámetro | tipo | Detalles |
|---|---|---|
| templateestring | 字符串 | La cadena de la plantilla sirve como contenido del modelo. |
| opción | 对象 | Las opciones se pasan al método IonicModal#inicializar. |
fromtemplateUrl (TemplateUrl, opciones)
| parámetro | tipo | Detalles |
|---|---|---|
| templateUrl | 字符串 | Cargue la URL de la plantilla. |
| opción | 对象 | Pase el objeto a través del método IonicModal#Inicializar. |
Return: Promise Object. El objeto Promeses es una especificación propuesta por el grupo de trabajo CommonJS, con el propósito de proporcionar una interfaz unificada para la programación asincrónica.
iónico
Instanciado por $ ionicmodal Service.
Consejo: cuando complete cada claro del módulo, asegúrese de llamar al método Remout () para evitar fugas de memoria.
Nota: Un módulo transmite 'modal.shown' y 'modal.hidden' desde su rango inicial, pasando como un parámetro.
método
Inicializar (opcional)
Cree un nuevo ejemplo de controlador de modelo.
| parámetro | tipo | Detalles |
|---|---|---|
| opción | 对象 | Un objeto de opción tiene las siguientes propiedades:
|
espectáculo()
Instancia del modelo de visualización
Valor de retorno: Promise Promise Object, analizado después de que el modelo complete la animación
esconder()
Ocultar el modelo.
Valor de retorno: Promise Promise Object, analizado después de que el modelo complete la animación
eliminar()
Elimine la instancia del modelo del DOM y limpia.
Valor de retorno: Promise Promise Object, analizado después de que el modelo complete la animación
isshown ()
Retorno: valor booleano, utilizado para determinar si se muestra el modelo.
Ejemplo
Código HTML
<html ng-app = "ionicapp"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "inicial-escala = 1, maximum-escale = 1, user-scalable = no, width = width de dispositivo"> <title> tutorial de Rookie (reroob.com) </title> <linker> href = "http://wwww.runoob.com/static/ionic/csss/ion.min.css" rel = "stylesheet"> <script src = "http://wwww.runoob.com/static/ionic/js/ionic.bundle.min.js"> </script> </heal ng-controller="AppCtrl"><ion-header-bar><h1>Contacts</h1><div><button ng-click="modal.show()"></button></div></ion-header-bar><ion-content><ion-list><ion-item ng-repeat="contact in Contactos "> {{Contact.name}} </ion-Item> </ion-list> </ ion-content> <script id =" plantlates/modal.html "type =" text/ng-template "> <ion-modal-view> <ion-teader-bar> <hhhiR ng-Click = "modal.hide ()"> Cancelar </boton> </ion-header-bar> <ion-content> <div> <label> <span> nombre de primer nombre </span> <input ng-model = "newUser.firstname" thipo = "text"> </label> <label> <labin> apellido </span> <input ng-model = "newuser.lame.LaLeM type = "text"> </label> <label> <span> correo electrónico </span> <input ng-model = "newUser.email" type = "text"> </label> <botón ng-c-chick = "createContact (newuser)"> Crear </botón> </iv> </ion-content> </ ion-modal-view> </script> </body> </html>Código CSS
cuerpo {cursor: url ('http://www.runoob.com/try/demo_source/finger.png'), auto;}Código JavaScript
angular.module ('ionicApp', ['ionic']). Controller ('appCtrl', function ($ scope, $ ionicModal) {$ scope.contacts = [{name: 'Gordon Freeman'}, {Nombre: 'Barney Calhoun'}, {name: 'Lamarr the Headcrab' },],]; $ ionicModal.fromTempLateUrl ('Templates/modal.html', {Scope: $ Scope}). entonces (function (modal) {$ Scope.modal = modal;}); u.lastName}); $ scope.modal.hide ();};});Código fuente completo:
<html ng-app = "ionicapp"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "inicial-escala = 1, máxima escala = 1, user-scalable = no, width = width de dispositivo"> <title> </title> <linke> 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/iónic.bundle.min.js"> </script> </script " {cursor: url ('http://ionicframework.com/img/finger.png'), auto;} </style> <scritch> angular.module ('ionicapp', ['ionic']. Controller ('appCtrl', function ($ spope, $ ionicmodal) {$ scope.contacts = [name: '{n (name' }, {nombre: 'Barney Calhoun'}, {name: 'lamarr the headcrab'},]; $ ionicModal.fromTemplateUrl ('Templates/modal.html', {escope: $ scope}). Entonces (function (modal) {$ scope.modal = modal;}); $ scope.cope.cope.cope. $ scope.contacts.push ({name: u.firstname + '' + u.lastname}); $ scope.modal.hide ();};}); </script> </tove> <body ng-controller = "appctrl"> <ion-teader-bar> <h1> contactos </h1> <div> <botón <botón <button ng-chick = "modal.show ()"> </boton> </div> </ ion-header-bar> <ion-content> <ion-list> <ion-item ng-repeat = "contact en contactos"> {{contact.name}} </ ion-item> </ ion-list> </ ion-content> <script Id = "Templates/" type = "text/ng-template"> <ion-modal-view> <ion-header-bar> <h1> nuevo contacto </h1> <botón ng-click = "modal.hide ()"> cancelar </boton> </ion-header-bar> <ion-content> <iv> <lelebel> <span> name </span> <put ng-model = "Newuser. type = "text"> </elelse> <label> <span> apellido </span> <input ng-model = "newuser.lastName" type = "text"> </label> <label> <span> email </span> <input ng-model = "newuser.email" type = "text"> </etlact> <botón ng-Click = "CreateContact (NewUser)"> Crear </botón> </div> </ion-content> </ion-modal-view> </script> </body> </html>