Latest web development tutorials

ionischen modalen Fenster

$ IonicModal

$ IonicModal können die wichtigsten Inhalte der Box Benutzeroberfläche abdecken.

Sie können den folgenden Code (im Code nach Ihren eigenen Business-Szenarien entsprechenden Änderungen) in der Indexdatei oder eine andere Datei einbetten. 

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

Dann können Sie in der Controller injizieren in $ ionicModal. Dann rufen Sie einfach eine Vorlage schreiben, initialisiert. Wie in den folgenden Code: 

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

Weg 

fromTemplate(templateString, options)
Parameter Typ Detail
templateString 字符串

String-Vorlage als Inhalt modalen Fenster.

Optionen 对象

Optionen ionicModal # weitergegeben initialisieren Methode.

Rückkehr: ein Objekt, eine Instanz von ionicModal Controller.

fromTemplateUrl(templateUrl, options)
Parameter Typ Detail
templateUrl 字符串

Laden URL-Vorlage.

Optionen 对象

Übergeben von Objekten durch ionicModal # initialisieren Methode.

Rückkehr: Versprechen Objekt.Promises Objekt eine Spezifikation Commonjs Arbeitsgruppe ist, es zielt darauf ab, eine einheitliche Schnittstelle zu asynchrone Programmierung zur Verfügung zu stellen.

ionicModal

Die $ ionicModal Dienste instanziiert.

Tipp: Wenn Sie jedes Modul klar vervollständigen, müssen Sie remove () -Methode aufzurufen Speicherlecks zu vermeiden.

HINWEIS: ein Modul von seinem Anfangsbereich der Übertragung der "modal.shown 'und' modal.hidden 'als Parameter selbst geführt werden.

Weg 

initialize(可选)

Erstellen Sie ein neues modalen Fenster Controller Beispiel.

Parameter Typ Detail
Optionen 对象

Klicken Sie auf eine der Optionen Objekt hat Eigenschaften:

  • {object=} 范围 Unterklassen reichen. Standard: $ rootScope eine Unterklasse erstellen.
  • {string=} 动画 mit einem Display oder verbergen Animation. Vorgabe: "slide-in-up '
  • {boolean=} 第一个输入框获取焦点 , wenn sie angezeigt, das erste Eingangselement modalen Fenster , ob automatisch den Fokus zu erhalten. Standardwert: false.
  • {boolean=} Sind Schließen modalen Fenster backdropClickToClose` Hintergrund klicken. Standard: true. 
show()

Modal Window-Instanz

  • Rückgabewert: promise Versprechen Objekte, die nach Abschluss der Animation in einem modalen Fenster gelöst werden 
hide()

Ausblenden modalen Fenster.

  • Rückgabewert: promise Versprechen Objekte, die nach Abschluss der Animation in einem modalen Fenster gelöst werden 
remove()

Entfernen Sie modale Fenster-Instanz aus dem DOM und sauber.

  • Rückgabewert: promise Versprechen Objekte, die nach Abschluss der Animation in einem modalen Fenster gelöst werden 
isShown()
  • Rückgabe: Boolean Wert verwendet modale Fenster zu bestimmen, wird angezeigt.

Beispiele

HTML-Code 

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

CSS-Code 

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

JavaScript-Code 

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

});