Latest web development tutorials

ventana modal iónica

$ IonicModal

$ IonicModal puede cubrir los contenidos principales de la interfaz de carpeta de usuario.

Puede incrustar el siguiente código (en el código de acuerdo a sus propios escenarios de negocio correspondientes cambios) en su archivo de índice u otro archivo. 

<script id="my-modal.html" type="text/ng-template">
  <ion-modal-view>
    <ion-header-bar>
      <h1 class="title">My Modal title</h1>
    </ion-header-bar>
    <ion-content>
      Hello!
    </ion-content>
  </ion-modal-view>
</script>

A continuación, puede en su interior Controlador inyectar $ ionicModal. Luego llama a que acaba de escribir una plantilla, inicializa. Al igual que en el siguiente código: 

angular.module('testApp', ['ionic'])
.controller('MyController', function($scope, $ionicModal) {
  $ionicModal.fromTemplateUrl('my-modal.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal;
  });
  $scope.openModal = function() {
    $scope.modal.show();
  };
  $scope.closeModal = function() {
    $scope.modal.hide();
  };
  //Cleanup the modal when we're done with it!
  $scope.$on('$destroy', function() {
    $scope.modal.remove();
  });
  // Execute action on hide modal
  $scope.$on('modal.hidden', function() {
    // Execute action
  });
  // Execute action on remove modal
  $scope.$on('modal.removed', function() {
    // Execute action
  });
});

camino 

fromTemplate(templateString, options)
parámetros tipo detalle
templateString 字符串

plantilla de cadena como la ventana modal contenido.

opciones 对象

opciones pasadas al ionicModal # inicializar método.

Devuelve: un objeto, una instancia del controlador ionicModal.

fromTemplateUrl(templateUrl, options)
parámetros tipo detalle
templateUrl 字符串

Cargando plantilla de URL.

opciones 对象

Los objetos que pasan por ionicModal # inicializar método.

Devuelve: objeto promesa.Promesas objeto es una especificación Grupo de Trabajo CommonJS, su objetivo es proporcionar una interfaz unificada para la programación asincrónica.

ionicModal

Los servicios de $ ionicModal ejemplifican.

Consejo: Al completar cada módulo clara, asegúrese de método remove () para evitar pérdidas de memoria.

NOTA: un módulo de su rango inicial de la difusión del 'modal.shown' y 'modal.hidden', que se pasa como un parámetro en sí.

camino 

initialize(可选)

Crear un nuevo ejemplo del controlador ventana modal.

parámetros tipo detalle
opciones 对象

Haga clic en una de las opciones objeto tiene propiedades:

  • {object=} 范围 oscilan subclases. Por defecto: $ rootScope crear una subclase.
  • {string=} 动画 con una animación mostrar u ocultar. Por defecto: "slide-in-up '
  • {boolean=} 第一个输入框获取焦点 cuando se muestra, la primera ventana modal elemento de entrada si desea obtener automáticamente el enfoque. Por omisión: falso.
  • {boolean=} están cerca ventana modal backdropClickToClose` haga clic en el fondo. Por defecto: cierto. 
show()

instancia de la ventana modal

  • Valor de retorno: promise objetos Promise, después de la finalización de la animación se resuelven en una ventana modal 
hide()

Ocultar ventana modal.

  • Valor de retorno: promise objetos Promise, después de la finalización de la animación se resuelven en una ventana modal 
remove()

Eliminar instancia ventana modal del DOM y limpio.

  • Valor de retorno: promise objetos Promise, después de la finalización de la animación se resuelven en una ventana modal 
isShown()
  • Devuelve: valor booleano se utiliza para determinar ventana modal se muestra.

Ejemplos

código HTML 

<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>本教程(w3big.com)</title>
    <link href="http://www.w3big.com/static/ionic/css/ionic.min.css" rel="stylesheet">
	<script src="http://www.w3big.com/static/ionic/js/ionic.bundle.min.js"></script>
  </head>
  <body ng-controller="AppCtrl">
    
    <ion-header-bar class="bar-positive">
      <h1 class="title">Contacts</h1>
      <div class="buttons">
        <button class="button button-icon ion-compose" ng-click="modal.show()">
        </button>
      </div>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item ng-repeat="contact in contacts">
          {{contact.name}}
        </ion-item>
      </ion-list>
    </ion-content>
    
    <script id="templates/modal.html" type="text/ng-template">
      <ion-modal-view>
        <ion-header-bar class="bar bar-header bar-positive">
          <h1 class="title">New Contact</h1>
          <button class="button button-clear button-primary" ng-click="modal.hide()">Cancel</button>
        </ion-header-bar>
        <ion-content class="padding">
          <div class="list">
            <label class="item item-input">
              <span class="input-label">First Name</span>
              <input ng-model="newUser.firstName" type="text">
            </label>
            <label class="item item-input">
              <span class="input-label">Last Name</span>
              <input ng-model="newUser.lastName" type="text">
            </label>
            <label class="item item-input">
              <span class="input-label">Email</span>
              <input ng-model="newUser.email" type="text">
            </label>
            <button class="button button-full button-positive" ng-click="createContact(newUser)">Create</button>
          </div>
        </ion-content>
      </ion-modal-view>
    </script>
    
  </body>
</html>

código CSS 

body {
  cursor: url('../try/demo_source/finger.png'), auto;
}

código JavaScript 

angular.module('ionicApp', ['ionic'])

.controller('AppCtrl', function($scope, $ionicModal) {
  
  $scope.contacts = [
    { name: 'Gordon Freeman' },
    { name: 'Barney Calhoun' },
    { name: 'Lamarr the Headcrab' },
  ];

  $ionicModal.fromTemplateUrl('templates/modal.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
  });
  
  $scope.createContact = function(u) {        
    $scope.contacts.push({ name: u.firstName + ' ' + u.lastName });
    $scope.modal.hide();
  };

});