Latest web development tutorials

ionic modal window

$ IonicModal

$ IonicModal can cover the main contents of the box user interface.

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

<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 in your Controller inside inject $ ionicModal. Then call you just write a template, initializes. As in 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
  });
});

method 

fromTemplate(templateString, options)
parameter Types of Detail
templateString 字符串

String template as the content modal window.

options 对象

options passed to ionicModal # initialize method.

Returns: an object, an instance of ionicModal controller.

fromTemplateUrl(templateUrl, options)
parameter Types of Detail
templateUrl 字符串

Loading url template.

options 对象

Passing objects by ionicModal # initialize method.

Returns: promise object.Promises object is a specification CommonJS Working Group, it aims to provide a unified interface to asynchronous programming.

ionicModal

The $ ionicModal services instantiate.

Tip: When you complete each module clear, be sure to call remove () method to avoid memory leaks.

NOTE: a module from its initial range of broadcasting the 'modal.shown' and 'modal.hidden', to be passed as a parameter itself.

method 

initialize(可选)

Create a new modal window controller example.

parameter Types of Detail
options 对象

Click one of the options object has properties:

  • {object=} 范围 subclasses range. Default: $ rootScope create a subclass.
  • {string=} 动画 with a display or hide animation. Default: 'slide-in-up'
  • {boolean=} 第一个输入框获取焦点 when displayed, the first input element modal window whether to automatically get the focus. Default: false.
  • {boolean=} Are Close modal window backdropClickToClose` click background. Default: true. 
show()

Modal window instance

  • Return Value: promise Promise objects, after the completion of the animation are resolved in a modal window 
hide()

Hide modal window.

  • Return Value: promise Promise objects, after the completion of the animation are resolved in a modal window 
remove()

Remove modal window instance from the DOM and clean.

  • Return Value: promise Promise objects, after the completion of the animation are resolved in a modal window 
isShown()
  • Returns: Boolean value used to determine modal window is displayed.

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>本教程(w3big.com)</title>
    <link href="http://www.w3big.com/static/ionic/css/ionic.min.css" rel="stylesheet">
	<script src="http://www.w3big.com/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('../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();
  };

});