ionic-framework
Extensiones Ionic AngularJS

Observaciones

Entradas de formulario

Las entradas iónicas no son diferentes de las entradas HTML normales, pero tienen un estilo diferente y se usan como una directiva. También puede utilizar entradas HTML normales en aplicaciones Ionic. Aquí hay algunos ejemplos básicos que Ionic ofrece listos para usar.

Caja:

<ion-checkbox ng-model="checkbox">Label</ion-checkbox>

Boton de radio:

<ion-radio ng-model="radio" ng-value="'radiovalue'">Value</ion-radio>

Palanca:

<ion-toggle ng-model="toggle" toggle-class="toggle-calm">Toggle</ion-toggle>

Ventanas modales

Ionic tiene su propia extensión para mostrar una ventana modal. Los modales se pueden crear insertando la plantilla directamente en la vista con una etiqueta <script> o usando un archivo de plantilla separado. En este ejemplo, asumimos que tiene un archivo html llamado modal-template.html en una carpeta llamada templates . Establece la ruta de la plantilla en la función de inicialización modal con fromTemplateUrl .

Creando el objeto modal en el alcance.

HTML

<ion-modal-view>
  <ion-header-bar>
    <h1>Modal title</h1>
  </ion-header-bar>
  <ion-content>
    <p>Modal content</p>
  </ion-content>
</ion-modal-view> 

Controlador

$ionicModal.fromTemplateUrl('/templates/modal-template.html', {
  scope: $scope,
  animation: 'slide-in-up'
}).then(function(modal) {
  $scope.modal = modal;
});

Controlar el modal

A continuación, puede controlar el modal con los siguientes comandos.

Abierto modal

$scope.modal.show();

Cerrar modal

$scope.modal.hide();

Quitar modal

$scope.modal.remove();

Eventos modales

Puedes escuchar eventos modales con las siguientes funciones.

Modal esta oculto

$scope.$on('modal.hidden', function() {
  // Do something when modal is hidden
});

Se elimina el modal

$scope.$on('modal.removed', function() {
  // Do something when modal is removed
});