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 ...
随机推荐
-
MVC 添加Area
在MVC项目中经常会使用到Area来分开不同的模块让项目结构更加的清晰. 步骤如下: 项目 –> 添加 -> 区域 ( Area ) 输入 Admin 添加成功后 Area包含: 创建一个 ...
-
mysql时间段内查询
今天 select * from 表名 where to_days(时间字段名) = to_days(now()); 昨天 SELECT * FROM 表名 WHERE TO_DAYS( NOW( ) ...
-
C#操作word的一些基本方法(word打印,插入文件,插入图片,定位页眉页脚,去掉横线)
Microsoft.Office.Interop.Word.Application wordApp = new ApplicationClass() word对象 2. Microsoft.Offic ...
-
ES6新特性:Javascript中Set和WeakSet类型的数据结构
ES6提供了新的数据结构Set,Set对象不是数组, 可以用来保存对象或者基本类型, 所有保存的值都是唯一的, chrome浏览器>38和FF>13,以及nodeJS,对Set支持良好, ...
-
CSS3之尖角标签
如图所示,Tag标签的制作通常使用背景图片,现在用CSS3代码就能实现尖角效果(需浏览器支持CSS3属性). 运用CSS3样式实现尖角标签,只需要写简单的HTML结构和CSS样式. <p> ...
-
CSS3中样式顺序
.box{ /*1*/ background: yellow; /*2*/ background: radial-gradient(ellise, yellow, red); } 就以上样式1和2的顺 ...
-
UVa 1629 Cake slicing (记忆化搜索)
题意:一个矩形蛋糕上有好多个樱桃,现在要做的就是切割最少的距离,切出矩形形状的小蛋糕,让每个蛋糕上都有一个樱桃,问最少切割距离是多少. 析:很容易知道是记忆化搜索,我们用dp[u][d][l][r]来 ...
-
C++11多线程教学(一)
本篇教学代码可在GitHub获得:https://github.com/sol-prog/threads. 在之前的教学中,我展示了一些最新进的C++11语言内容: 1. 正则表达式(http://s ...
-
we are happy 把空格换成 %20 剑指offer P44
public class StringReplace { public static void replaceSpace(String[] str, int length) { if(str == n ...
-
oracle连表语法
1.笛卡尔积 (表一乘以表二) (表连接建立在笛卡尔积上过滤) select * from emp,dept; 2.等值连接 (表与表之见有相同的列表) select ename,dname from ...