ionic中的$inoicModal
ionic中的$inoicModal
大牧莫邪
发布于 2018-08-27 16:23:26
发布于 2018-08-27 16:23:26
ionic中的模态窗口
在ionic中，除了常规的弹窗【$ionicPopup】还提供了浮动窗口【$ionicPopover】
其次在ionic中，还有一种新的弹窗，这样的弹窗，会占据整个页面，成为模态窗口，模态窗口可以通过$ionicModal服务来进行创建、显示、隐藏、移除等功能。
模态窗口，为了加载方便，通常会在页面中的script标签中进行添加，如下
<script type="text/ng-template" id="modal">
<!-- 此处是添加HTML模板内容的地方 -->
<div class="modal">
<ion-header-bar>
<h1 class="title">模态窗口标题</h1>
</ion-header-bar>
<ion-content>
<!-- 模态窗口中显示的内容 -->
</ion-content>
</div>
</script>在Angular的控制器中，就可以初始化这个模态窗口，并且定义函数来进行显示、隐藏、删除的控制
var app = angular.module("myApp", ["ionic"]);
app.controller("myCtrl", function($scope, $ionicModal) {
// 初始化窗口
$ionicModal.fromTemplateUrl("modal", {
scope:$scope,
animation:"slide-in-up"
}).then(function(modal) {
$scope.dialog = modal;
});
// 显示模态窗口的函数
$scope.openModal = function() {
$scope.dialog.show();
}
// 隐藏模态窗口的函数
$scope.hideModal = function() {
$scope.dialog.hide();
}
// 删除模态窗口的函数：慎重使用，一旦删除，这个窗口将不可用
$scope.removeModal = function() {
$scope.dialog.remove();
}
});在HTML页面中，就可以直接调用了
<ion-header-bar>
<button class="button button-clear" ng-click="openModal()">显示模态窗口</button>
<h1 class="title">页头标题</h1>
</ion-header-bar>以上是关于ionic中模态窗口的使用方式，仅供参考。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017.05.11 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录