Ionic Dialog

From WikiOD
Ionic dialog[edit | edit source]

$ IonicPopup[edit | edit source]

The ionic dialog service allows programs to create and display pop-up windows.

$ionicPopup provides 3 methods: alert(), prompt(), and confirm().

Instance[edit | edit source]

HTML code[edit | edit source]
 <body class="padding" ng-controller="PopupCtrl">
 	<button class="button button-dark" ng-click="showPopup()">
 	  Pop-up display
 	</button>
 	<button class="button button-primary" ng-click="showConfirm()">
 	  Confirmation dialog
 	</button>
 	<button class="button button-positive" ng-click="showAlert()">
 	  Warning box
 	</button>
 
 	<script id="popup-template.html" type="text/ng-template">
 	  <input ng-model="data.wifi" type="text" placeholder="Password">
 	</script>
 </body>
Java Script code[edit | edit source]
 angular.module('mySuperApp', ['ionic'])
 .controller('PopupCtrl',function($scope, $ionicPopup, $timeout) {
 
  // Triggered on a button click, or some other target
  $scope.showPopup = function() {
    $scope.data = {}
 
    // Customize the pop-up window
    var myPopup = $ionicPopup.show({
      template:'<input type="password" ng-model="data.wifi">',
      title:'Enter Wi-Fi Password',
      subTitle:'Please use normal things',
      scope: $scope,
      buttons: [
        {text:'Cancel' },
        {
          text:'<code><b>Save</b></code>',
          type:'button-positive',
          onTap: function(e) {
            if (!$scope.data.wifi) {
              // Do not allow the user to close, unless the wifi password is entered
              e.preventDefault();
            } else {
              return $scope.data.wifi;
            }
          }
        },
      ]
    });
    myPopup.then(function(res) {
      console.log('Tapped!', res);
    });
    $timeout(function() {
       myPopup.close(); // close the popup window after 3 seconds
    }, 3000);
   };
    // confirm dialog
    $scope.showConfirm = function() {
      var confirmPopup = $ionicPopup.confirm({
        title:'Consume Ice Cream',
        template:'Are you sure you want to eat this ice cream?'
      });
      confirmPopup.then(function(res) {
        if(res) {
          console.log('You are sure');
        } else {
          console.log('You are not sure');
        }
      });
    };
 
    // alert dialog
    $scope.showAlert = function() {
      var alertPopup = $ionicPopup.alert({
        title:'Don\'t eat that!',
        template:'It might taste good'
      });
      alertPopup.then(function(res) {
        console.log('Thank you for not eating my delicious ice cream cone');
      });
    };
 });