Ionic学习笔记5_动态组件指令
1. 模态对话框 : $ionicModal
模态对话框常用来供用户进行选择或编辑，在模态对话框关闭之前，其他 的用户交互行为被阻止 .操作模态对象返回结果，模态对象的方法提前定制。
三个步骤
1.声明对话框模板 使用ion-modal-view指令声明对话框模板，对话框模板通常置入 script内以构造内联模板：
<script id="a.html" type="text/ng-template">
<ion-modal-view> <!--对话框内容--> </ion-modal-view>
</script>
<script id="my-modal.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar class="bar-positive">
<h1 class="title">ion-modal-view</h1>
<a class="button" ng-click="closeModal();">关闭</a>
<a class="button" ng-click="removeModal();">remove</a>
</ion-header-bar>
<ion-content>
<div class="padding">
<div class="list">
<label class="item item-input">
<span class="input-label">First Name</span>
<input ng-model="newUser.firstName" type="text">
</label>
<label class="item item-input">
<span class="input-label">Last Name</span>
<input ng-model="newUser.lastName" type="text">
</label>
<label class="item item-input">
<span class="input-label">Email</span>
<input ng-model="newUser.email" type="text">
</label>
<button class="button button-full button-positive" ng-click="createContact()">Create</button>
</div>
</div>
</ion-content>
</ion-modal-view>
</script>
2.创建对话框对象 服务$ionicModal有两个方法用来创建对话框对象：
fromTemplate(templateString,options) - 使用字符串模板 fromTemplateUrl(templateUrl,options) - 使用内联模板这两个方法返回的都是一个对话框对象。
<script>
angular.module("myApp", ["ionic"])
.controller("myCtrl", function($scope, $ionicModal) {
$ionicModal.fromTemplateUrl("my-modal.html", {
scope: $scope,
animation: "slide-in-up"
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
$scope.removeModal = function() {
$scope.modal.remove();
};
//Cleanup the modal when we are done with it!
$scope.$on("$destroy", function() {
console.log('modal.$destroy');
$scope.modal.remove();
});
// Execute action on hide modal
$scope.$on("modal.hidden", function() {
// Execute action
console.log('modal.hidden');
});
// Execute action on remove modal
$scope.$on("modal.removed", function() {
// Execute action
console.log('modal.removed');
});
$scope.newUser = {};
$scope.createContact = function () {
console.log('Create Contact', $scope.newUser);
$scope.modal.hide();
};
});
</script>
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()方法用来创建上拉菜单，返回一个函数，调用该 返回函数可以关闭此菜单。
<a class="button" ng-click="show();">操作</a>
<script>
angular.module("myApp", ["ionic"])
.controller("myCtrl",function($scope, $ionicActionSheet, $timeout) {
// Triggered on a button click, or some other target
$scope.show = function() {
// Show the action sheet
var hideSheet= $ionicActionSheet.show({
cancelOnStateChange:true,
cssClass:'action_s',
titleText: "操作当前文章",
buttons: [
{ text: "<b>分享</b>文章" },
{ text: "移动到..." }
],
buttonClicked: function(index) {
console.log('操作了第'+index+'个文章');
return true;
},
cancelText: "取消",
cancel: function() {
// add cancel code..
console.log('执行了取消操作');
return true;
},
destructiveText: "删除",
destructiveButtonClicked:function(){
console.log('执行了删除操作');
return true;
}
});
// For example's sake, hide the sheet after two seconds
$timeout(function() {
hideSheet();
}, 2000);
};
});
</script>
3. 弹出框 : $ionicPopup
弹出框通常用于提醒、警告等，在用户响应之前其他交互行为不能继续。与模态 对话框覆盖整个屏幕空间不同，弹出框通常仅占据一部分屏幕空间。
在ionic中，使用$ionicPopup服务管理弹出框：
$ionicPopup.show(options) .then(function(){
//这个函数在弹出框关闭时被调用
});
show()方法返回的是一个promise对象，当弹出框关闭后，该对象被解析，这意味着 then()方法指定的参数函数此时将被调用。
show()方法的参数options是一个JSON对象，可以包括以下字段：
title - 弹出框标题文本
subTitle - 弹出框副标题文本
template - 弹出框内容的字符串模板
templateUrl - 弹出框内容的内联模板URL
scope - 要关联的作用域对象
buttons - 自定义按钮数组。按钮总是被置于弹出框底部
cssClass - 附加的CSS样式类
<ion-content padding="true">
<a class="button button-block button-calm" ng-click="showPopup();">定制弹出框/popup</a>
<a class="button button-block button-calm" ng-click="showConfirm();">确认框/confirm</a>
<a class="button button-block button-calm" ng-click="showAlert();">警告框alert</a>
<a class="button button-block button-calm" ng-click="showPrompt();">提示框/prompt</a>
</ion-content>
<ion-footer-bar class="bar-positive">
<h1 class="title">{{status}}</h1>
</ion-footer-bar>
<script>
angular.module("myApp", ["ionic"])
.controller("myCtrl",function($scope, $ionicPopup, $timeout) {
$scope.status = "";
// 显示定制弹出框
$scope.showPopup = function() {
$scope.data = {}
// 调用$ionicPopup弹出定制弹出框
$ionicPopup.show({
template: "<input type='password' ng-model='data.wifi'>",
title: "请输入Wi-Fi密码",
subTitle: "密码为8位",
scope: $scope,
buttons: [
{ text: "取消" },
{
text: "<b>保存</b>",
type: "button-positive",
onTap: function(e) {
return $scope.data.wifi;
}
}
]
})
.then(function(res) {
$scope.status = ["Wi-Fi密码到手了",":",res].join(" ");
});
};
// 确认弹出框
$scope.showConfirm = function() {
$ionicPopup.confirm({
title: "定制冰激凌",
template: "你确定要吃我的冰淇淋吗？",
okText:"OK"
})
.then(function(res) {
if(res) {
$scope.status = "凭什么吃我的冰淇淋！";
} else {
$scope.status = "谢谢你不吃之恩！";
}
});
};
//警告弹出框
$scope.showAlert = function() {
$ionicPopup.alert({
title: "不要吃果冻",
template: "它们可能是用旧的皮鞋帮做的！"
})
.then(function(res) {
$scope.status = "感谢上帝，你没吃鞋帮哦！11";
});
};
//输入提示框
$scope.showPrompt = function(){
$ionicPopup.prompt({
title: "不要吃果冻",
template: "它们可能是用旧的皮鞋帮做的！"
})
.then(function(res) {
$scope.status = "感谢上帝，你没吃鞋帮哦！"+res;
});
}
});
</script>
4.浮动框 : $ionicPopover
<a class="button" ng-click="openPopover($event);">帮助</a>
<script id="ez-popover.html" type="text/ng-template">
<ion-popover-view class="calm-bg light padding">
<p>这里应该有些帮助信息....</p>
</ion-popover-view>
</script>
angular.module("myApp", ["ionic"])
.controller("myCtrl", function($scope, $ionicPopover) {
$ionicPopover.fromTemplateUrl("ez-popover.html", {
scope: $scope
})
.then(function(popover){
$scope.popover = popover;
})
$scope.openPopover = function($event) {
$scope.popover.show($event);
};
$scope.closePopover = function() {
$scope.popover.hide();
};
//销毁事件回调处理：清理popover对象
$scope.$on("$destroy", function() {
$scope.popover.remove();
});
// 隐藏事件回调处理
$scope.$on("popover.hidden", function() {
// Execute action
});
//删除事件回调处理
$scope.$on("popover.removed", function() {
// Execute action
});
});
5. 载入指示器 : $ionicLoading
<a class="button icon ion-refresh" ng-click="load();">载入</a>
angular.module("myApp", ["ionic"])
.controller("myCtrl", function($scope, $ionicLoading,$timeout) {
$scope.items = [];
var idx = 0;
$scope.load = function() {
//显示载入指示器
$ionicLoading.show({
template: "正在载入数据，请稍后..."
});
//延时2000ms来模拟载入的耗时行为
$timeout(function(){
for(var i=0;i<10;i++,idx++) $scope.items.unshift("item " + idx);
//隐藏载入指示器
$ionicLoading.hide();
},2000);
};
});
6. 背景幕 : $ionicBackdrop
angular.module("myApp",["ionic"])
.controller("myCtrl",function($scope, $ionicBackdrop, $timeout,$interval) {
$scope.locks = 0;
//保持背景幕
$scope.retain = function() {
$ionicBackdrop.retain();
$scope.locks++;
};
//释放背景幕
$scope.release = function() {
$ionicBackdrop.release();
$scope.locks > 0 ? $scope.locks-- : 0;
};
$interval(function(){
if($scope.locks > 0){
$ionicBackdrop.release();
$scope.locks--;
}
},2000)
});
</script>
