View Source   Improve this doc

$ionicModal

See the Pen by Ionic (@ionic) on CodePen.

Related: ionicModal controller.

The Modal is a content pane that can go over the user’s main view temporarily. Usually used for making a choice or editing an item.

Put the content of the modal inside of an <ion-modal-view> element.

Notes: - A modal will broadcast ‘modal.shown’, ‘modal.hidden’, and ‘modal.removed’ events from its originating scope, passing in itself as an event argument. Both the modal.removed and modal.hidden events are called when the modal is removed.

  • This example assumes your modal is in your main index file or another template file. If it is in its own template file, remove the script tags and call it by file name.

Usage

<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>

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
  });
});

Methods

fromTemplate(templateString, options)

Param Type Details
templateString string

The template string to use as the modal's content.
options object

Options to be passed ionicModal#initialize method.
  • Returns: object An instance of an ionicModal controller.

fromTemplateUrl(templateUrl, options)

Param Type Details
templateUrl string

The url to load the template from.
options object

Options to be passed ionicModal#initialize method. options object.
  • Returns: promise A promise that will be resolved with an instance of an ionicModal controller.