ionic-framework
Ionic AngularJS-Erweiterungen

Bemerkungen

Formulareingaben

Ionische Eingaben unterscheiden sich nicht von normalen HTML-Eingaben, sie sind jedoch anders gestaltet und als Direktive verwendet. In Ionic-Apps können Sie auch normale HTML-Eingaben verwenden. Hier sind einige grundlegende Beispiele, die Ionic als Ready-to-Go anbietet.

Checkbox:

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

Radio knopf:

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

Umschalten:

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

Modale Fenster

Ionic hat eine eigene Erweiterung für die Anzeige eines modalen Fensters. Modale können erstellt werden, indem die Vorlage direkt mit einem <script> -Tag in die Ansicht eingefügt wird oder indem eine separate Vorlagendatei verwendet wird. In diesem Beispiel gehen wir davon aus, dass Sie eine HTML-Datei mit dem Namen modal-template.html in einem Ordner mit dem Namen templates . Den Vorlagenpfad legen Sie in der modalen Initialisierungsfunktion mit fromTemplateUrl .

Das modale Objekt im Gültigkeitsbereich erstellen

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> 

Regler

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

Steuere den Modal

Sie können den Modal dann mit den folgenden Befehlen steuern.

Modal öffnen

$scope.modal.show();

Schließen Sie Modal

$scope.modal.hide();

Modal entfernen

$scope.modal.remove();

Modale Ereignisse

Sie können modale Ereignisse mit den folgenden Funktionen abhören.

Modal ist versteckt

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

Modal wird entfernt

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