The Modal

The Modal is a content pane that can go over the user’s main view temporarily.

by Mohd Zaki

HTML

<link rel="stylesheet" href="https://code.ionicframework.com/1.0.0/css/ionic.min.css">
<script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
<ion-pane ng-controller="MyModalCtrl">
      <ion-header-bar class="bar-dark">
        <h1 class="title">The Modal</h1>
        <button  ng-click="openModal()" class="button button-icon ion-android-call"></button>
      </ion-header-bar>
      <ion-content class="no-padding">
        <div class="card">
          <div class="item item-text-wrap">
            The Modal is a content pane that can go over the user’s main view
temporarily.
          </div>
        </div>
      </ion-content>
    </ion-pane>
    <script id="my-modal.html" type="text/ng-template">
      <ion-modal-view>
        <ion-header-bar>
          <h1 class="title">Contact List</h1>
          <button  ng-click="closeModal()" class="button button-icon ion-android-cancel"></button>
        </ion-header-bar>
          <ion-content>
            <ion-list>
              <ion-item ng-repeat="item in menuItems" href="#" ng-click="clickAlert(item.name)"> 
              {{item.name}}
              </ion-item>
            </ion-list>
        </ion-content>
      </ion-modal-view>
    </script>

JavaScript

var app = angular.module('app', ['ionic']);
/**
 * use $scope
 * use $ionicModal
 * use $ionicPopup
 */
app.controller('MyModalCtrl', function($scope,$ionicModal,$ionicPopup) {

$scope.menuItems = [
    { name: 'View Contact' },
    { name: 'Media' },
    { name: 'Search' },
    { name: 'Wallpaper' },
    { name: 'More' },
  ];

/**
* ng-click on item list
* and show popup value
*/
$scope.clickAlert = function(item){
    var alertPopup = $ionicPopup.alert({
     title: 'Alert Popup',
     template: item
   });

};

/**
* ng-click on header button
* and show modal with list item
*/
//Start-up setting modal
 $ionicModal.fromTemplateUrl('my-modal.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal;
  });
  //Modal show when ng-click openModal()
  $scope.openModal = function() {
    $scope.modal.show();
  };
  //Modal hide when ng-click closeModal()
  $scope.closeModal = function() {
    $scope.modal.hide();
  };
  //Cleanup the modal when we're done with it!
  $scope.$on('$destroy', function() {
    $scope.modal.remove();
  });
  
});