ionic Popup(弹窗)

来源：互联网发布：孙悟空直销软件编辑：程序博客网时间：2024/06/05 19:12

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

0 0