ionic modal window

May 22, 2021 ionic

ionic modal window

$ionicModal

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

You can embed the following code in your index file or in another file (the code inside can change according to your own 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 the $ionicModal. T hen call the template you just written and initialize. 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
  });
});

Method

fromTemplate(templateString, options)

Parameters	Type	Details
templateString	`字符串`	The string of the template serves as the content of the modal window.
options	`对象`	Options are passed to the ionicModal-initialize method.

Back: Object, an instance of an ionicModal controller.

fromTemplateUrl(templateUrl, options)

Parameters	Type	Details
templateUrl	`字符串`	Load the url of the template.
options	`对象`	Pass the object through the ionicModal-initialize method.

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

ionicModal

Instantified by the $ionicModal service.

Tip: When you're done clearing each module, make sure to call the remove() method to avoid memory leaks.

Note: A module broadcasts 'modal.show' and 'modal.hidden' from its initial range, passing itself as a parameter.

Method

initialize(可选)

Create an example of a new modal window controller.

Parameters Type Details

options

Parameters	Type	Details
options	`对象`	An option object has a property: `{object=}` `范围` Default: Create a $rootScope sub-class. `{string=}` `动画` display or hidden animation. Default: 'slide-in-up' `{boolean=}` focus When `第一个输入框获取焦点` does the first input element of the modal window automatically get the focus? Default: false. `{boolean=}` close when you click on the background? Default: true.


        对象

An option object has a property:

{object=} 范围 Default: Create a $rootScope sub-class.
{string=} 动画 display or hidden animation. Default: 'slide-in-up'
{boolean=} focus When 第一个输入框获取焦点 does the first input element of the modal window automatically get the focus? Default: false.
{boolean=} close when you click on the background? Default: true.

show()

Displays modal window instances

Return value: The promise object is parsed after the modal window completes the animation

hide()

Hide modal windows.

Return value: The promise object is parsed after the modal window completes the animation

remove()

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

Return value: The promise object is parsed after the modal window completes the animation

isShown()

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

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>W3Cschool教程(w3cschool.cn)</title>
    <link href="//www.w3cschool.cn/statics/demosource/ionic.min.css" rel="stylesheet">
	<script src="//www.w3cschool.cn/statics/demosource/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('https://w3cschool.cn/statics/demosource/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 out . . .

ionic modal window

Table of contents