ionic Popup(弹窗)
来源:互联网 发布:孙悟空直销软件 编辑:程序博客网 时间:2024/06/10 13:49
$ionicPopup.show(options)
.then(function(){
//这个函数在弹出框关闭时被调用
});
show()方法返回的是一个promise对象,当弹出框关闭后,该对象被解析,这意味着 then()方法指定的参数函数此时将被调用。
show()方法的参数options是一个JSON对象,可以包括以下字段:
{
title: '', // String. 弹窗的标题。
subTitle: '', // String (可选)。弹窗的副标题。
template: '', // String (可选)。放在弹窗body内的html模板。
templateUrl: '', // String (可选)。放在弹窗body内的html模板的URL。
inputType: // String (默认: 'text')。input的类型。
inputPlaceholder: // String (默认: '')。input的 placeholder。
cancelText: // String (默认: 'Cancel')。取消按钮的文字。
cancelType: // String (默认: 'button-default')。取消按钮的类型。
okText: // String (默认: 'OK')。OK按钮的文字。
okType: // String (默认: 'button-positive')。OK按钮的类型。
buttons: //自定义按钮数组。按钮总是被置于弹出框底部。
cssClass: //附加的CSS样式类
}
alert(options) - 警告弹出框,仅包含一个按钮供关闭弹出框
confirm(options) - 确认弹出框,包含一个取消按钮和一个确认按钮
prompt(options) - 输入提示弹出框,包含一个文本输入框、一个取消按钮和一个确认按钮
1、Html
<ion-header-bar class="bar bar-header bar-light bar-calm"> <ion-title class="bar-calm">腾讯新闻</ion-title></ion-header-bar><ion-content> <button class="button button-dark" ng-click="showPopup()">show</button> <button class="button button-primary" ng-click="showConfirm()">Confirm</button> <button class="button button-positive" ng-click="showAlert()">Alert</button> <script id="popup-template.html" type="text/ng-template"> <input ng-model="data.wifi" type="text" placeholder="Password"> </script></ion-content>
2、Controller
appCntrollers.controller('ManagePopupCtrl', function ($scope, $ionicPopup, $timeout) { // 触发一个按钮点击,或一些其他目标 $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: '取消', type: "button-assertive", }, { text: '<b>确定</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); }; // 一个确认对话框$ionicPopup.confirm $scope.showConfirm = function () { var confirmPopup = $ionicPopup.confirm({ title: '标题', template: '你确定要吃这个冰淇淋吗?', cancelText: "取消", cancelType: "button-assertive", okText: '确定', okType: "button-dark", }); confirmPopup.then(function (res) { if (res) { console.log('You are sure'); } else { console.log('You are not sure'); } }); }; // 一个提示对话框$ionicPopup.alert $scope.showAlert = function () { var alertPopup = $ionicPopup.alert({ title: '标题', template: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容!!!', okText: '确定', okType: 'button-positive' }); alertPopup.then(function (res) { console.log('Thank you for not eating my delicious ice cream cone'); }); };})
- ionic Popup(弹窗)
- ionic使用记录----popup
- ionic实现点击popup区域外部来关闭popup
- ionic 连续弹出两次、多次popup问题
- ionic-轻触touch背景幕关闭popup弹出框
- Ionic中自定义popup写法以及点击backdrop隐藏popup的directive写法
- popup弹窗(备忘)
- POPUP
- Popup
- popup
- popup
- popup
- popup
- popup
- popup
- popup
- popup?
- popup
- 知识体系
- SLAM: 单目视觉SLAM的方案分类
- Openfiler iscsiadm: No portals found 解决方法
- MySQL中存储与管理树型数据结构
- linux服务器如何检查远程用户登陆状态、时间、ip地址等信息
- ionic Popup(弹窗)
- oracle 统计当年和当月数据
- IOS 后台运行定位介绍及解决办法
- arcgis for ios 去掉地图上的开发英文
- xUtils和FastJson获取和解析网络数据
- 哈夫曼树
- Java入门——方法
- 装饰者模式
- 「小程序」开发 指南(里面是小程序开发的各种论坛和文档)