ionic-framework Ionic AngularJS extensions Modal windows


Example

Ionic has it's own extension for displaying a modal window. Modals can be created by inserting the template straight to the view with a <script> tag or by using a separate template file. In this example we are assuming you have a html file named modal-template.html in a folder called templates. You set the template path in the modal initialisation function with fromTemplateUrl.

Creating the modal object in the scope

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> 

Controller

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

Control the modal

You can then control the modal with the following commands.

Open modal

$scope.modal.show();

Close modal

$scope.modal.hide();

Remove modal

$scope.modal.remove();

Modal events

You can listen to modal events with the following functions.

Modal is hidden

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

Modal is removed

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