Ionic Modal Window

$ionicModal

$ionicModal can overlay the content box of the user's main interface.

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

<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 into your Controller, and call the template you just wrote to initialize it. 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)
Parameters Type Details
templateString String

A template string used as the content of the modal window.
options Object

options will be passed to the ionicModal#initialize method.

Returns:Object, an instance of the ionicModal controller.

fromTemplateUrl(templateUrl, options)
Parameters Type Details
templateUrl String

The URL for loading the template.
options Object

An object passed through the ionicModal#initialize method.

Returns:A promise object. The Promises object is a specification proposed by the CommonJS working group, aiming to provide a unified interface for asynchronous programming.

ionicModal

Instantiated by the $ionicModal service.

Tip: When you finish cleaning up each modal, make sure to call the remove() method to avoid memory leaks.

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

Methods

initialize(可选)

Create a new modal window controller instance.

Parameters Type Details
options Object

An options object with the following properties:

  • {object=} RangeThe scope of the modal. Default: creates a $rootScope child.
  • {string=} AnimationThe animation for showing and hiding. Default: 'slide-in-up'
  • {boolean=} The first input box gets focusWhether the first input element of the modal window automatically receives focus when shown. Default: false.
  • {boolean=}`backdropClickToClose` - Whether to close the modal window when the backdrop is clicked. Default: true.
 
show()

Show the modal window instance.

  • Return value:promiseA promise object, resolved after the modal window finishes animation.
hide()

Hide the modal window.

  • Return value:promiseA promise object, resolved after the modal window finishes animation.
remove()

Remove the modal window instance from the DOM and clean up.

  • Return value:promiseA promise object, resolved after the modal window finishes animation.
isShown()
  • Returns: A boolean value to determine whether the modal window is shown.

Examples

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>Example(example.com)</title>
    <link href="../static/ionic/css/ionic.min.css" rel="stylesheet">
    <script src="../static/ionic/js/ionic.bundle.min.js"></script>
  </head>
  <body ng-controller="AppCtrl">
    
    <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>
        <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>
        <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>
        <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.example.com/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();
  };

});

Other Extensions