首页 » ionic » ionic JavaScript
网站地图

ionic 对话框

$ionicPopup

ionic 对话框服务允许程序创建、显示弹出窗口。

$ionicPopup 提供了3个方法：alert(), prompt(),以及 confirm() 。

实例

HTML 代码

  1. <body class="padding" ng-controller="PopupCtrl">
  2. 	<button class="button button-dark" ng-click="showPopup()">
  3. 	  弹窗显示
  4. 	</button>
  5. 	<button class="button button-primary" ng-click="showConfirm()">
  6. 	  确认对话框
  7. 	</button>
  8. 	<button class="button button-positive" ng-click="showAlert()">
  9. 	  警告框
  10. 	</button>
  11.  
  12. 	<script id="popup-template.html" type="text/ng-template">
  13. 	  <input ng-model="data.wifi" type="text" placeholder="Password">
  14. 	</script>
  15. </body>

JavaScript 代码

  1. angular.module('mySuperApp', ['ionic'])
  2. .controller('PopupCtrl',function($scope, $ionicPopup, $timeout) {
  3.  
  4.  // Triggered on a button click, or some other target
  5.  $scope.showPopup = function() {
  6.    $scope.data = {}
  7.  
  8.    // 自定义弹窗
  9.    var myPopup = $ionicPopup.show({
  10.      template: '<input type="password" ng-model="data.wifi">',
  11.      title: 'Enter Wi-Fi Password',
  12.      subTitle: 'Please use normal things',
  13.      scope: $scope,
  14.      buttons: [
  15.        { text: 'Cancel' },
  16.        {
  17.          text: '<b>Save</b>',
  18.          type: 'button-positive',
  19.          onTap: function(e) {
  20.            if (!$scope.data.wifi) {
  21.              // 不允许用户关闭，除非输入 wifi 密码
  22.              e.preventDefault();
  23.            } else {
  24.              return $scope.data.wifi;
  25.            }
  26.          }
  27.        },
  28.      ]
  29.    });
  30.    myPopup.then(function(res) {
  31.      console.log('Tapped!', res);
  32.    });
  33.    $timeout(function() {
  34.       myPopup.close(); // 3秒后关闭弹窗
  35.    }, 3000);
  36.   };
  37.    //  confirm 对话框
  38.    $scope.showConfirm = function() {
  39.      var confirmPopup = $ionicPopup.confirm({
  40.        title: 'Consume Ice Cream',
  41.        template: 'Are you sure you want to eat this ice cream?'
  42.      });
  43.      confirmPopup.then(function(res) {
  44.        if(res) {
  45.          console.log('You are sure');
  46.        } else {
  47.          console.log('You are not sure');
  48.        }
  49.      });
  50.    };
  51.  
  52.    //  alert（警告） 对话框
  53.    $scope.showAlert = function() {
  54.      var alertPopup = $ionicPopup.alert({
  55.        title: 'Don\'t eat that!',
  56.        template: 'It might taste good'
  57.      });
  58.      alertPopup.then(function(res) {
  59.        console.log('Thank you for not eating my delicious ice cream cone');
  60.      });
  61.    };
  62. });