ionic 动态组件（一）

ionic 动态组件（一） $ionicModal $ionicActionSheet $ionicPopup $ionicPopover $ionicLoading $ionicBackdrop

学习要点：
1.模态对话框 : $ionicModal
2.上拉菜单 : $ionicActionSheet
3.弹出框 : $ionicPopup
4.浮动框 : $ionicPopover
5.载入指示器 : $ionicLoading
6.背景幕 : $ionicBackdrop

1.模态对话框 : $ionicModal
模态对话框常用来供用户进行选择或编辑，在模态对话框关闭之前，其他的用户交互行为
被阻止。
在 ionic 中使用模态对话框有三个步骤：
1.声明对话框模板
使用 ion-modal-view 指令声明对话框模板，对话框模板通常置入 script 内以构造内联模板：

2.创建对话框对象
服务$ionicModal 有两个方法用来创建对话框对象：
fromTemplate(templateString,options) - 使用字符串模板
fromTemplateUrl(templateUrl,options) - 使用内联模板

这两个方法返回的都是一个对话框对象。
3.操作对话框对象
对象框对象有以下方法用于显示、隐藏或删除对话框：
show() - 显示对话框
hide() - 隐藏对话框
remove() - 移除对话框
isShown() - 对话框是否可视？

2.上拉菜单 : $ionicActionSheet
上拉菜单是一个自屏幕底部向上滑出的菜单，通常用来让用户做出选择。
ionic 的上拉菜单由三种按钮组成，点击任何按钮都自动关闭上拉菜单：
取消按钮 - 取消按钮总是位于菜单的底部，用户点击该按钮将关闭。一个上拉菜单最
多有一个取消按钮。
危险选项按钮 - 危险选项按钮文字被标红以明显提示。一个上拉菜单最多有一个危险
选项按钮。
自定义按钮 - 用户定义的任意数量的按钮。

在 ionic 中使用上拉菜单需要遵循以下步骤：
1.定义上拉菜单选项
使用一个 JSON 对象定义上拉菜单选项，包括以下字段：
titleText - 上拉菜单的标题文本
buttons - 自定义按钮数组。每个按钮需要一个描述对象，其 text 字段用于按钮显示
cancelText - 取消按钮的文本。如果不设置此字段，则上拉菜单中不出现取消按钮
destructiveText - 危险选项按钮的文本。如果不设置此字段，则上拉菜单中不出现危险
选项按钮
buttonClicked - 自定义按钮的回调函数，当用户点击时触发
cancel - 取消按钮回调函数，当用户点击时触发
destructiveButtonClicked - 危险选项按钮的回调函数，当用户点击时触发
cancelOnStateChange - 当切换到新的视图时是否关闭此上拉菜单。默认为 true
cssClass - 附加的 CSS 样式类名称

2.创建上拉菜单
$ionicActionSheet 服务的 show()方法用来创建上拉菜单，返回一个函数，调用该返回函数
可以关闭此菜单。

angular.module("ezApp", ["ionic"])
.controller("ezCtrl",function($scope, $ionicActionSheet, $timeout) {
// Triggered on a button click, or some other target
$scope.show = function() {
// Show the action sheet
var hideSheet = $ionicActionSheet.show({
titleText: "操作当前文章",
buttons: [
{ text: "<b>分享</b>文章" },
{ text: "移动到..." }
],
buttonClicked: function(index) {
return true;
},
cancelText: "取消",
cancel: function() {
// add cancel code..
},
destructiveText: "删除",
destructiveButtonClicked:function(){
}
});
// For example's sake, hide the sheet after two seconds
$timeout(function() {
// hideSheet();
}, 2000);
};
});

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。