$ionicModal

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)

• Returns: object An instance of an ionicModal controller.

fromTemplateUrl(templateUrl, options)

• Returns: promise A promise that will be resolved with an instance of an ionicModal controller.