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>