ionic-framework
Ionische AngularJS-extensies

Opmerkingen

Formulier invoer

Ionische ingangen verschillen niet van normale HTML-ingangen, maar ze zijn anders gestileerd en worden als richtlijn gebruikt. U kunt ook normale HTML-invoer gebruiken in Ionische apps. Hier zijn enkele basisvoorbeelden die Ionic kant-en-klaar biedt.

checkbox:

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

Radio knop:

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

toggle:

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

Modale vensters

Ionic heeft een eigen extensie voor het weergeven van een modaal venster. Modals kunnen worden gemaakt door de sjabloon rechtstreeks in de weergave in te voegen met een <script> -tag of door een afzonderlijk sjabloonbestand te gebruiken. In dit voorbeeld gaan we ervan uit dat u een html-bestand met de naam modal-template.html in een map met de naam templates . U stelt het sjabloonpad in de modale initialisatiefunctie in met fromTemplateUrl .

Het modale object in het bereik maken

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> 

controleur

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

Bestuur de modal

Je kunt de modal vervolgens besturen met de volgende opdrachten.

Open modal

$scope.modal.show();

Modal sluiten

$scope.modal.hide();

Verwijder modal

$scope.modal.remove();

Modale evenementen

U kunt naar modale gebeurtenissen luisteren met de volgende functies.

Modal is verborgen

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

Modal is verwijderd

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