.controller('PopupCtrl',function($scope, $ionicPopup, $timeout) {
//注入$ionicPopup,
$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?',
buttons: [
{
text: '取消' },
{
text: '<b>确认</b>',
type: 'button-positive',
},
]
});
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');
});
};
});
//model 框
$ionicModal.fromTemplateUrl('modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function (modal) {
$scope.modal = modal;
});
$scope.openUser = function (item) {
$scope.fixboxshow = true;
$scope.userName = item.xyname;
$scope.userCompany = item.zw;
$scope.userPhone = item.sjhm;
$scope.modal.show();
}
$scope.closeAll = function () {
$scope.fixboxshow = false;
$scope.modal.hide();
}
//当我们用完模型时，清除它！
$scope.$on('$destroy', function () {
$scope.modal.remove();
});
<script id="modal.html" type="text/ng-template">
<div class="fixdiv">
<div id="appraisal">
<div class="description">
<p class="item">姓名:</p>
<p class="item">{
{
userName}}</p>
</div>
<div class="hr"></div>
<div class="description">
<p class="item">工作单位及职务:</p>
<p class="item">{
{
userCompany}}</p>
</div>
<div class="hr"></div>
<div class="description">
<p class="item">电话:</p>
<p class="item">{
{
userPhone}}</p>
</div>
</div>
</div>
</script>
</head>
<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>
Here is a reference to the
ionic modal box https://www.runoob.com/try/try.php?filename=ionic_ionicpopup
Here is a reference to the ionic modal box
https://www.cnblogs.com/CheeseZH/p/4522264.html
