ionic 对话框服务允许程序创建、显示弹出窗口。
$ionicPopup 提供了3个方法：alert(), prompt(),以及 confirm() 。
| <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> |
| angular.module('mySuperApp', ['ionic']) |
| .controller('PopupCtrl',function($scope, $ionicPopup, $timeout) { |
| // Triggered on a button click, or some other target |
| $scope.showPopup = function() { |
| $scope.data = {} |
| // 自定义弹窗 |
| 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: '<b>Save</b>', |
| type: 'button-positive', |
| onTap: function(e) { |
| if (!$scope.data.wifi) { |
| // 不允许用户关闭，除非输入 wifi 密码 |
| e.preventDefault(); |
| } else { |
| return $scope.data.wifi; |
| } |
| } |
| }, |
| ] |
| }); |
| myPopup.then(function(res) { |
| console.log('Tapped!', res); |
| }); |
| $timeout(function() { |
| myPopup.close(); // 3秒后关闭弹窗 |
| }, 3000); |
| }; |
| // confirm 对话框 |
| $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（警告） 对话框 |
| $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'); |
| }); |
| }; |
| }); |
