ionic 项目中添加modal的步骤流程
1、首先在templates文件夹下面定义一个新页面,xxx.html,template文件夹在空项目里面是没有的,需要手动添加一个,放在WWW文件夹下面。
<ion-modal-view>
<ion-header-bar>
<h1 class="title">My Modal title</h1>
</ion-header-bar>
<ion-content>
Hello!
</ion-content>
</ion-modal-view>
上面的是官网的HTML页面代码,还有其他的写法如下:
<ion-view class="modal" ng-controller="creatUserCtrl">
<ion-header-bar class="head">
<h1 class="title">创建用户</h1> <div class="primary-buttons">
<button class="button button-clear icon ion-ios-arrow-left" ng-click="hide()"
style="color: #ffffff"></button>
</div>
</ion-header-bar>
<ion-view>
根据所建项目的不同来分情况使用
2、在你需要出现modal的页面控制器里,写上如下js代码:
angular.module('testApp', ['ionic'])
.controller('MyController', function($scope, $ionicModal) { //这里记得添加依赖项
$ionicModal.fromTemplateUrl('my-modal.html', { //这个html是自己定义的modal页面
scope: $scope,
animation: 'slide-in-up' //modal出现的方式是从下往上
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() { //定义一个函数来触发modal
$scope.modal.show();
};
});
3、在以上2里面所用到的都是基础的modal的一些方法,具体在项目中要想实现的效果可以查看官网,我在实战项目中遇到的有向modal传值,获取modal中返回的值等问题。
ionic 项目中添加modal的步骤流程的更多相关文章
- ionic 项目中创建侧边栏的具体流程分4步简单学会
这是在学习ionic时,当时遇到的一些问题,觉得很难,就记笔记下来了,现在觉得如果可以拿来分享,有可能会帮助到遇到同样问题的人 ionic slidemenu 项目流程: cd pretices(自己 ...
- Ionic项目中使用极光推送
Ionic项目中使用极光推送-android 对于Ionic项目中使用消息推送服务,Ionic官方提供了ngCordova项目,这个里面的提供了用angularjs封装好的消息推送服务(官方文档) ...
- Ionic项目中使用极光推送-android
对于Ionic项目中使用消息推送服务,Ionic官方提供了ngCordova项目,这个里面的提供了用angularjs封装好的消息推送服务(官方文档),使用的是GitHub上的 PushPlugin ...
- 关于如何正确地在android项目中添加第三方jar包
在android项目中添加第三方jar包虽然不是一个很复杂的问题,但是确实给很多开发者带来了不小的困扰.我自己就曾经碰到过calss not found exception.error inflati ...
- ionic 项目中使用ngCordova插件$cordovaCamera筛选手机图库图片显示出来并上传
原文档请看http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/ionic%E5%9B%BE%E7%89%87%E4%B8%8A%E4%B ...
- Ionic项目中如何使用Native Camera
本文介绍如何在ionic项目中使用设备的camera. Ionic版本:v3.2.0 / 2017-05-10 / MIT Licensed / Release Notes ============= ...
- ionic 项目中 使用 sass
注: 1.先安装node-sass -->> npm install --save node-sass --registry=https://registry.npm.taobao.or ...
- Entity Framework 的小实例:在项目中添加一个实体类,并做插入操作
Entity Framework 的小实例:在项目中添加一个实体类,并做插入操作 1>. 创建一个控制台程序2>. 添加一个 ADO.NET实体数据模型,选择对应的数据库与表(Studen ...
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
随机推荐
- web安全色
web安全色产生的原因 不同的平台(Mac.PC等)有不同的调色板,不同的浏览器也有自己的调色板.这就意味着对于一幅图,显示在Mac上的Web浏览器中的图像,与它在PC上相同浏览器中显示的效果可能差别 ...
- C#基础知识-流程控制的应用(四)
流程控制我们在编程中运用到的地方非常的多,在上篇中仅仅只是简单的介绍每一种的使用,并没有运用到实例中,很难去理解它真正的作用.下面我们将实际的运用流程控制的代码写一些实例相关的程序,加深对流程控制的理 ...
- .net 程序集
前言:用了几天的时间把高级编程里面程序集一章看完了,原来自己只知道写代码,右键添加引用,从来也不知道操作的实质是什么,微软总是这个套路,鼠标点点就能把任务完成,这对新手友好但是对要通透了解程序执行和内 ...
- (转)html中 cookie设置
box=="checkBox '是否记住用户密码'": window.onload=function init() { var box = getCookie(" ...
- 使用Tomcat-redis-session-manager来实现Tomcat集群部署中的Session共享
一.工作中因为要使用到Tomcat集群部署,此时就涉及到了Session共享问题,主要有三种解决方案: 1.使用数据库来存储Session 2.使用Cookie来存储Session 3.使用Redis ...
- JAVA并发编程实战---第二章:线程安全性
对象的状态是指存储在状态变量中的数据.对象的状态可能包括其他依赖对象的域.例如HashMap的状态不仅存储在HashMap本身,还存储在许多Map.Entry对象中.对象的状态中包含了任何可能影响其外 ...
- SharePoint Application Page启用匿名访问
现在的项目需要使用sharepoint application page来展示图片影像,并让其它应用系统匿名访问,经过一番认真研究,主要有下面的步骤: 1. 在web applicaiton leve ...
- Hibernate乐观锁、悲观锁和多态
乐观锁和悲观锁 悲观锁(Pessimistic Lock), 顾名思义,就是很悲观,每次去拿数据的时候都认为别人会修改,所以每次在拿数据的时候都会上锁,这样别人想拿这个数据就会block直到它拿到锁 ...
- Linux下关闭JBoss实例
本文内容: 查看JBoss运行实例 #ps -ef|grep java 上图就是运行结果(部分结果),其中一个服务器上可能会运行多个JBOSS server实例,找到你需要看的那个. 其中 ps -e ...
- 开涛spring3(2.1) - IoC基础
2.1.1 IoC是什么 Ioc—Inversion of Control,即“控制反转”,不是什么技术,而是一种设计思想.在Java开发中,Ioc意味着将你设计好的对象交给容器控制,而不是传统的在 ...