本文转自:http://m.blog.csdn.net/blog/betreex/45649689

原文地址:Ionic最佳实践-使用模态窗口modal

模态窗口的结构

在Ionic中,模态窗口通过$ionicModal提供。他易于使用且非常强大,详细信息请参考$ionicModal文档。Ionic中的模态窗口可以使用模板字符串或URL创建。本文将使用URL。

模态窗口创建时绑定到一个scope,这个scope可以用来传递数据。然而,在更复杂的情况下,通过服务来访问共享数据是最好的做法。

制作模态窗口的标记

创建模态窗口非常简单。首先,让我们来创建我们的用户界面。这个小例子将会展示一条联系人信息,点击后允许对它进行编辑。

<ion-header-bar class="bar-energized">
<h1 class="title">Contact Info</h1>
</ion-header-bar>
<ion-content>
<div class="card" ng-controller='MainCtrl' ng-click="openModal()">
<div class="item item-divider">
{{contact.name}}
</div>
<div class="item item-text-wrap">
{{contact.info}}
</div>
</div>
</ion-content>

现在,看起来还没有什么特别的,唯一与模态窗口相关的是一个scope函数:openModal()。还缺少我们的modal部分。直接在当前标记中添加它。

<script id="contact-modal.html" type="text/ng-template">
<div class="modal">
<ion-header-bar>
<h1 class="title">Edit Contact</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<label class="item item-input">
<span class="input-label">Name</span>
<input type="text" ng-model="contact.name">
</label>
<label class="item item-input">
<span class="input-label">Info</span>
<input type="text" ng-model="contact.info">
</label>
</div>
<button class="button button-full button-energized" ng-click="closeModal()">Done</button>
</ion-content>
</div>
</script>

在生产环境中,你可能想把模板标记放入独立文件中或把它们添加到模板缓存中。与Ionic中其他使用模板的部分一样,Angular将先从模板缓存中搜索需要的文件。

显示模态窗口

模态窗口的控制器代码非常简单。确保在控制器中注入依赖项$ionicModal。

 
app.controller('MainCtrl', function($scope, $ionicModal) {
$scope.contact = {
name: 'Mittens Cat',
info: 'Tap anywhere on the card to open the modal'
}
$ionicModal.fromTemplateUrl('contact-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.$on('$destroy', function() {
$scope.modal.remove();
});
})

Ionic的模态窗口使用了一个异步deferred。这样可以异步访问模板缓存和构建模态窗口。我们可以为模态窗口提供一个scope对象,否则他将使用$rootScope。可以为模态窗口的打开动作指定过度动画效果。官方文档中描述了更多过度效果。

一旦模态窗口构建完毕,异步完成函数允许我们设置一个$scope.modal变量。模态窗口有一些函数。在本例中,我们关心show, hide和remove函数。remove函数特别重要。通过监听scope对象的$destroy事件,我们可以确保对模态窗口对象进行垃圾回收。忽略它将会导致你的程序出现内存泄漏。

回顾

模态窗口是一个很强大的用户界面组件,通过Ionic来展现和利用它是一件很轻松的事情。

[转]Ionic最佳实践-使用模态窗口modal的更多相关文章

  1. BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)

    上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...

  2. 15款最好的 jQuery Modal(模态窗口)插件

    jQuery 模态窗口插件帮助网站开发人员显示网页中的特定内容,让用户聚焦到这个地方.模态窗口是嵌入到当前网页中,不用重定向到新网页的弹出窗口.这种技术可以用在图像画廊,电子商务网站,登陆框,电子邮件 ...

  3. Flex设置PopUpManager创建modal(模态)窗口的背景样式

    有一个需求 , 使用PopUpManager弹出的窗口modal模式不可操作的地方颜色太浅, 这样弹出的窗口就不够突出, 搜了下没发现解决办法, 翻看了PopUpManagerImpl源码 , 找到了 ...

  4. 使用jQuery和Bootstrap实现多层、自适应模态窗口

    本篇实践一个多层模态窗口,而且是自适应的. 点击页面上的一个按钮,弹出第一层自适应模态窗口. 在第一层模态窗口内包含一个按钮,点击该按钮弹出第二层模态窗口,弹出的第二层模态窗口会挡住第一层模态窗口,即 ...

  5. 基于vue3.0+electron新开窗口|Electron多开窗体|父子模态窗口

    最近一直在折腾Vue3+Electron技术结合的实践,今天就来分享一些vue3.x和electron实现开启多窗口功能. 开始本文之前,先来介绍下如何使用vue3和electron来快速搭建项目. ...

  6. Web最佳实践阅读总结(1)

    介绍 最近开始刷一些书和题,此系列是介绍在读Web最佳实践的一些收获和体会. web前端发展现状 存在问题: 代码组织混乱 代码格式的问题突出 页面布局随意 网站整体性能差,没有意识到应用诸如缓存,动 ...

  7. Spring Batch在大型企业中的最佳实践

    在大型企业中,由于业务复杂.数据量大.数据格式不同.数据交互格式繁杂,并非所有的操作都能通过交互界面进行处理.而有一些操作需要定期读取大批量的数据,然后进行一系列的后续处理.这样的过程就是" ...

  8. Canvas 最佳实践(性能篇)

    Canvas 想必前端同学们都不陌生,它是 HTML5 新增的「画布」元素,允许我们使用 JavaScript 来绘制图形.目前,所有的主流浏览器都支持 Canvas. Canvas 最常见的用途是渲 ...

  9. 用JqueryUI的Dialog+IFrame实现仿模态窗口效果

    大家有没有想过这样一个问题,当我点击某个图片的时候,我想弹出这个图片信息的详情并修改,于是你首先想到的是不是window.open?window.open方法确实可以,但是有它的局限性,比如,标题显示 ...

随机推荐

  1. Tomcat配置文件server.xml

    Tomcat目录中的server.xml配置文件 server.xml称为主配置文件或全局配置文件 它完成以下两个目标: 1,提供Tomcat组件的初始化配置 2,说明Tomcat的结构和含义,使得T ...

  2. CentOS 7.2 搭建 Openvpn 服务器

    本文将以目前最新的openvpn-2.3.13.tar.gz为例来介绍如何在Linux系统中安装.配置及使用OpenVPN. 在这里,我们选用了一台预装CentOS 7.2 64位系统的计算机作为Op ...

  3. SQL数据库基础(一)

    数据库: 结构化查询语言(Structured Query Language)简称SQL: 数据库管理系统(Database Management System)简称DBMS: 数据库管理员(Data ...

  4. 【GOF23设计模式】原型模式

    来源:http://www.bjsxt.com/ 一.[GOF23设计模式]_原型模式.prototype.浅复制.深复制.Cloneable接口  浅复制 package com.test.prot ...

  5. Gulp-前端进阶A-3---如何不刷新监控文件变化?

    npm install --save-dev gulp-connect npm install --save-dev gulp-livereload npm其他,前面已有 var gulp = req ...

  6. SVG基础图形与参数

    SVG是什么 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义WEB上使用的矢量图 SVG 使用 XML 格式定义图形 SVG 图像在缩放时其图形质量不 ...

  7. jQuery淡入淡出效果轮播图

    用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...

  8. SharePoint 使用PowerShell恢复误删的网站集

    在SharePoint网站集的使用中,我们很有可能会误删我们需要的网站集,SharePoint其实并没有把网站集删掉,只是放到了SPDeletedSite中,这样,我们还可以通过PowerShell找 ...

  9. virtualbox迁移至vcenter/vmware workstation

    参考文献: http://www.itsecurenet.com/virtualbox-ova-to-vsphere-ovf/ http://www.techrepublic.com/blog/win ...

  10. C语言柔性数组

    结构中最后一个元素允许是未知大小的数组,这个数组就是柔性数组.但结构中的柔性数组前面必须至少一个其他成员,柔性数组成员允许结构中包含一个大小可变的数组,sizeof返回的这种结构大小不包括柔性数组的内 ...