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 ...
随机推荐
- 【算法系列学习】线段树 单点覆盖,区间查询最大值 [kuangbin带你飞]专题七 线段树 B - I Hate It
https://vjudge.net/contest/66989#overview #include<iostream> #include<cstdio> #include&l ...
- Python库的安装方法
Python库的安装方法 Python的解释器CPython是开源的,我们可以下载查看其源代码,同时,Python语言的各种库也都是开源的.利用Python语言编程,可用的库有很多,在Python官方 ...
- javascript 六种数据类型(一)
js的数据类型和常见隐式转化逻辑. 一.六种数据类型 原始类型(基本类型):按值访问,可以操作保存在变量中实际的值.原始类型汇总中null和undefined比较特殊. 引用类型:引用类型的值是保存在 ...
- Lazyman功能实现
题目要求是这样的: 实现一个LazyMan,可以按照以下方式调用: LazyMan("Hank")输出: Hi! This is Hank! LazyMan("Hank& ...
- Java 7之基础 - 强引用、弱引用、软引用、虚引用
1.强引用(StrongReference) 强引用是使用最普遍的引用.如果一个对象具有强引用,那垃圾回收器绝不会回收它.如下: Object o=new Object(); // 强引用 当内 ...
- Redis学习-String
命令 描述 复杂的 返回值 SET key value [EX seconds] [PX milliseconds] [NX|XX] 将字符串值value关联到key.如果key已经持有其他值, ...
- jQuery库冲突解决办法
一次面试中面试官问到jQuery解决怎么冲突?虽然以前看过,但是我已经不记得了. 我的思路就是如果让我来设计,那我就用一个默认值$,不传参数,那就用$,最后就挂载在window.$上,传参数就用传入名 ...
- jQuery选择器的的优点
jQuery选择器的的优点 选择器想必大家都不陌生,今天呢,我就给大家介绍一下jQuery选择器的优点: jQuery选择器更简洁的写法: jQuery完善的处理机制: jQuery选择器判断dom节 ...
- 必知的 15 个jQuery小技巧(干货)
jQuery小技巧(干活) 1.返回顶部按钮 你可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件. $('a.top').click(function(){ ...
- Android开发中使用static变量应该注意的问题
package com.highxin.launcher01; import java.util.ArrayList; import java.util.HashMap; import java.ut ...