Ionic Modal-Fenster

$ionicModal

$ionicModal kann den Inhaltsbereich der Hauptoberfläche des Benutzers überlagern.

Sie können den folgenden Code in Ihre Indexdatei oder andere Dateien einbetten (der darin enthaltene Code kann entsprechend Ihren eigenen Geschäftsszenarien geändert werden).

<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 kannst du $ionicModal in deinen Controller injizieren und das soeben geschriebene Template aufrufen, um es zu initialisieren. Wie im 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
  });
});

Methoden

fromTemplate(templateString, options)

Gibt zurück:Ein Objekt, eine Instanz des ionicModal-Controllers.

fromTemplateUrl(templateUrl, options)

Gibt zurück:Ein Promise-Objekt. Das Promises-Objekt ist eine Spezifikation, die von der CommonJS-Arbeitsgruppe vorgeschlagen wurde, mit dem Ziel, eine einheitliche Schnittstelle für asynchrone Programmierung bereitzustellen.

ionicModal

Wird durch den $ionicModal-Dienst instanziiert.

Tipp: Wenn du mit dem Aufräumen jedes Modals fertig bist, achte darauf, die Methode remove() aufzurufen, um Speicherlecks zu vermeiden.

Hinweis: Ein Modal sendet 'modal.shown' und 'modal.hidden' aus seinem initialen Scope und übergibt sich selbst als Argument.

Methoden

initialize(可选)

Neue Instanz des Modal-Fenster-Controllers erstellen.

show()

Die Modal-Fenster-Instanz anzeigen.

• Rückgabewert:promiseEin Promise-Objekt, das aufgelöst wird, nachdem das Modal-Fenster die Animation beendet hat.

hide()

Das Modal-Fenster ausblenden.

• Rückgabewert:promiseEin Promise-Objekt, das aufgelöst wird, nachdem das Modal-Fenster die Animation beendet hat.

remove()

Die Modal-Fenster-Instanz aus dem DOM entfernen und bereinigen.

• Rückgabewert:promiseEin Promise-Objekt, das aufgelöst wird, nachdem das Modal-Fenster die Animation beendet hat.

isShown()

• Rückgabe: Ein boolescher Wert, der bestimmt, ob das Modal-Fenster angezeigt wird.

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>Example(example.com)</title>
    <link href="../static/ionic/css/ionic.min.css" rel="stylesheet">
    <script src="../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('http://www.example.com/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();
  };

});