ionic Modal Window

$ionicModal

$ionicModal can cover the main content area of the user interface.

You can embed the following code in your index file or other files (the code inside can be changed according to your business scenario).

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

Then you can inject $ionicModal in your Controller. Then call the template you just wrote to perform the initialization operation. Like the following code:

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)

Parameter	Type	Details
templateString	String	The string of the template as the content of the modal window.
options	Object	Options passed to the ionicModal#initialize method.

Returns: Object, an instance of the ionicModal controller.

fromTemplateUrl(templateUrl, options)

Parameter	Type	Details
templateUrl	String	The URL to load the template.
options	Object	Object passed through the ionicModal#initialize method.

Returns: Promise object. Promises object is a specification proposed by the CommonJS working group to provide a unified interface for asynchronous programming.

ionicModal

Instantiated by the $ionicModal service.

Note: Ensure that you call the remove() method when you are done with each modal to avoid memory leaks.

Attention: A modal broadcasts 'modal.shown' and 'modal.hidden' from its initial scope, passing itself as an argument.

Methods

initialize(optional)

Create a new modal window controller instance.

| Parameter | Type | Details | | --- | --- | --- |

Options

An option object has the following properties:

{object=} scope The scope for the subclass. Default: Creates a subclass of $rootScope.
{string=} animation Animation with show or hide effects. Default: 'slide-in-up'
{boolean=} focusFirstInput Whether the first input element in the modal automatically gets focus when shown. Default: false.
{boolean=} backdropClickToClose Whether clicking on the backdrop closes the modal. Default: true.

show()

Displays the modal instance.

Return value: promise A promise object that resolves after the modal completes its animation.

hide()

Hides the modal.

Return value: promise A promise object that resolves after the modal completes its animation.

remove()

Removes the modal instance from the DOM and cleans up.

Return value: promise A promise object that resolves after the modal completes its animation.

isShown()

Return: Boolean value to determine if the modal is displayed.

Example

HTML Code

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 

    <title>tutorialpro.org(tutorialpro.org)</title>
    <link href="http://www.tutorialpro.org/static/ionic/css/ionic.min.css" rel="stylesheet">
    <script src="http://www.tutorialpro.org/static/ionic/js/ionic.bundle.min.js"></script>
  </head>
  <body ng-controller="AppCtrl">

    &lt;ion-header-bar class="bar-positive">
      <h1 class="title">Contacts</h1>
      <div class="buttons">
        <button class="button button-icon ion-compose" ng-click="modal.show()">
        </button>
      </div>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        &lt;ion-item ng-repeat="contact in contacts">
          {{contact.name}}
        </ion-item>
      </ion-list>
    </ion-content>

    <script id="templates/modal.html" type="text/ng-template">
      <ion-modal-view>
        &lt;ion-header-bar class="bar bar-header bar-positive">
          <h1 class="title">New Contact</h1>
          <button class="button button-clear button-primary" ng-click="modal.hide()">Cancel</button>
        </ion-header-bar>
        &lt;ion-content class="padding">
          <div class="list">
            <label class="item item-input">
              <span class="input-label">First Name</span>
              <input ng-model="newUser.firstName" type="text">
            </label>
            <label class="item item-input">
              <span class="input-label">Last Name</span>

<input ng-model="newUser.lastName" type="text">
</label>
<label class="item item-input">
  <span class="input-label">Email</span>
  <input ng-model="newUser.email" type="text">
</label>
<button class="button button-full button-positive" ng-click="createContact(newUser)">Create</button>
</div>
</ion-content>
</ion-modal-view>
</script>

</body>
</html>

CSS Code

body {
  cursor: url('http://www.tutorialpro.org/try/demo_source/finger.png'), auto;
}

JavaScript Code

angular.module('ionicApp', ['ionic'])

.controller('AppCtrl', function($scope, $ionicModal) {

  $scope.contacts = [
    { name: 'Gordon Freeman' },
    { name: 'Barney Calhoun' },
    { name: 'Lamarr the Headcrab' },
  ];

  $ionicModal.fromTemplateUrl('templates/modal.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
  });

  $scope.createContact = function(u) {        
    $scope.contacts.push({ name: u.firstName + ' ' + u.lastName });
    $scope.modal.hide();
  };

});

Try it »

❮ Home Ionic Ion Nav View ❯