ionic 对话框

$ionicPopup

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

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

实例

HTML 代码


<body class="padding" ng-controller="PopupCtrl">
    <button class="button button-dark" ng-click="showPopup()">
      弹窗显示
    </button>
    <button class="button button-primary" ng-click="showConfirm()">
      确认对话框
    </button>
    <button class="button button-positive" ng-click="showAlert()">
      警告框
    </button>

    <script id="popup-template.html" type="text/ng-template">
      <input ng-model="data.wifi" type="text" placeholder="Password">
    </script>
</body>

JavaScript 代码


angular.module(&qpos;mySuperApp&qpos;, [&qpos;ionic&qpos;])
.controller(&qpos;PopupCtrl&qpos;,function($scope, $ionicPopup, $timeout) {

 // Triggered on a button click, or some other target
 $scope.showPopup = function() {
   $scope.data = {}

   // 自定义弹窗
   var myPopup = $ionicPopup.show({
     template: &qpos;<input type="password" ng-model="data.wifi">&qpos;,
     title: &qpos;Enter Wi-Fi Password&qpos;,
     subTitle: &qpos;Please use normal things&qpos;,
     scope: $scope,
     buttons: [
       { text: &qpos;Cancel&qpos; },
       {
         text: &qpos;<b>Save</b>&qpos;,
         type: &qpos;button-positive&qpos;,
         onTap: function(e) {
           if (!$scope.data.wifi) {
             // 不允许用户关闭，除非输入 wifi 密码
             e.preventDefault();
           } else {
             return $scope.data.wifi;
           }
         }
       },
     ]
   });
   myPopup.then(function(res) {
     console.log(&qpos;Tapped!&qpos;, res);
   });
   $timeout(function() {
      myPopup.close(); // 3秒后关闭弹窗
   }, 3000);
  };
   //  confirm 对话框
   $scope.showConfirm = function() {
     var confirmPopup = $ionicPopup.confirm({
       title: &qpos;Consume Ice Cream&qpos;,
       template: &qpos;Are you sure you want to eat this ice cream?&qpos;
     });
     confirmPopup.then(function(res) {
       if(res) {
         console.log(&qpos;You are sure&qpos;);
       } else {
         console.log(&qpos;You are not sure&qpos;);
       }
     });
   };

   //  alert（警告） 对话框
   $scope.showAlert = function() {
     var alertPopup = $ionicPopup.alert({
       title: &qpos;Don&qpos;t eat that!&qpos;,
       template: &qpos;It might taste good&qpos;
     });
     alertPopup.then(function(res) {
       console.log(&qpos;Thank you for not eating my delicious ice cream cone&qpos;);
     });
   };
});