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('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');
});
};
});