- 模态化窗口的使用
在使用ionic开发过程中有时候我们需要使用到一些小画面,但是如果使用弹出框显示可能显示不是十分美观,这时候我们就要用到模态化窗口。模态对话框常用来供用户进行选择或编辑,在模态对话框关闭之前,其他的用户交互行为被阻止。
在ionic时候在那个使用到模态化窗口需要三个步骤。
声明对话框模板
使用ion-modal-view指令声明对话框模板,对话框模板通常置入 script内以构造内联模板创建对话框对象 使用服务$ionicModal有两个方法用来创建对话框对象:
fromTemplate(templateString,options) - 使用字符串模板
fromTemplateUrl(templateUrl,options) - 使用内联模板 这两个方法返回的都是一个对话框对象。操作对象
对象框对象有以下方法用于显示、隐藏或删除对话框:
show() - 显示对话框
remove() - 移除对话框
isShown() - 对话框是否可视?
<script id="test-modal.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar class="bar-positive">
<h1 class="title">模态化窗口</h1>
<a class="button" ng-click="closeModal();">关闭</a>
</ion-header-bar>
<ion-content>
内容
</ion-content>
</ion-modal-view>
</script>
//创建对话框对象
$ionicModal.fromTemplateUrl("test-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();
};
//Cleanup the modal when we are done with it!
$scope.$on("$destroy", function() {
$scope.modal.remove();
});
// Execute action on hide modal
$scope.$on("modal.hidden", function() {
// Execute action
});
// Execute action on remove modal
$scope.$on("modal.removed", function() {
// Execute action
});