ionic-framework Ionic AngularJS extensions Modal windows


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


    <h1>Modal title</h1>
    <p>Modal content</p>


$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


Close modal


Remove modal


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