Latest web development tutorials

Fenêtre modale ionique

$ IonicModal

$ IonicModal peut couvrir le contenu principal de l'interface utilisateur de la boîte.

Vous pouvez intégrer le code suivant (dans le code en fonction de vos propres scénarios d'affaires changements correspondants) dans votre fichier d'index ou un autre fichier. 

<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>

Ensuite, vous pouvez dans votre contrôleur à l'intérieur d'injecter $ ionicModal. Alors appelez-vous écrivez simplement un modèle, initialise. Comme dans le code suivant: 

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
  });
});

manière 

fromTemplate(templateString, options)
Paramètres type détail
templateString 字符串

modèle de chaîne que la fenêtre modale contenu.

Options 对象

options passées à ionicModal # initialisent méthode.

Renvoie: un objet, une instance de contrôleur ionicModal.

fromTemplateUrl(templateUrl, options)
Paramètres type détail
templateURL 字符串

Chargement modèle url.

Options 对象

Passing objets par ionicModal # initialisent méthode.

Renvoie: objet promesse.Promises objet est une spécification Groupe de travail CommonJS, il vise à fournir une interface unifiée à la programmation asynchrone.

ionicModal

Les services $ ionicModal instancier.

Astuce: Lorsque vous avez terminé chaque module clair, veillez à appeler la méthode remove () pour éviter les fuites de mémoire.

REMARQUE: un module de sa gamme initiale de la diffusion du 'modal.shown' et 'modal.hidden', pour être passé en tant que paramètre lui-même.

manière 

initialize(可选)

Créer un nouvel exemple de contrôleur de fenêtre modale.

Paramètres type détail
Options 对象

Cliquez sur l'une des options objet a des propriétés:

  • {object=} 范围 des sous - classes vont. Par défaut: $ rootScope créer une sous-classe.
  • {string=} 动画 avec une animation d'affichage ou masquer. Valeur par défaut: «slide-in-up '
  • {boolean=} 第一个输入框获取焦点 lors de l' affichage, la première fenêtre modale de l' élément d'entrée si pour obtenir automatiquement la mise au point. Par défaut: false.
  • {boolean=} sont - ils Fermer la fenêtre modale backdropClickToClose` cliquez sur arrière - plan. Par défaut: true. 
show()

instance de fenêtre Modal

  • Valeur de retour: promise objets Promise, après l'achèvement de l'animation sont résolus dans une fenêtre modale 
hide()

Masquer la fenêtre modale.

  • Valeur de retour: promise objets Promise, après l'achèvement de l'animation sont résolus dans une fenêtre modale 
remove()

Retirer instance de fenêtre modale du DOM et propre.

  • Valeur de retour: promise objets Promise, après l'achèvement de l'animation sont résolus dans une fenêtre modale 
isShown()
  • Retours: Valeur booléenne utilisée pour déterminer la fenêtre modale est affichée.

Exemples

Le code 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>

code CSS 

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

code 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();
  };

});