首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

ionic js 模型 $ionicModal 可以遮住用户主界面的内容框

Posted in Javascript onJune 06, 2016

 ionic 模型

$ionicModal

$ionicModal 可以遮住用户主界面的内容框。

你可以在你的 index 文件或者是其他文件内嵌入以下代码(里面的代码可以根据你自己的业务场景相应的改变)。

<script id="my-modal.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar>
<h1 class="title">My Modal title</h1>
</ion-header-bar>
<ion-content>
Hello!
</ion-content>
</ion-modal-view>
</script>

然后你就可以在你的 Controller 里面的注入 $ionicModal 。然后调用你刚刚写入的模板，进行初始化操作。就像下面的代码：

angular.module('testApp', ['ionic'])
.controller('MyController', function($scope, $ionicModal) {
$ionicModal.fromTemplateUrl('my-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();
};
//Cleanup the modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
// Execute action on hide modal
$scope.$on('modal.hidden', function() {
// Execute action
});
// Execute action on remove modal
$scope.$on('modal.removed', function() {
// Execute action
});
});

方法

fromTemplate(templateString, options)

参数 类型 详情
templateString 字符串 模板的字符串作为模型的内容。
options 对象 options 会传递到 ionicModal#initialize方法中。
返回: 对象, 一个ionicModal控制器的实例。

fromTemplateUrl(templateUrl, options)

参数 类型 详情
templateUrl 字符串 载入模板的url。
options 对象 通过ionicModal#initialize方法传递对象。

返回： promise对象。Promises对象是CommonJS工作组提出的一种规范，目的是为异步编程提供统一接口。

ionicModal

由$ionicModal服务实例化。

提示：当你完成每个模块清除时，确保调用remove()方法，以避免内存泄漏。

注意：一个模块从它的初始范围广播出 'modal.shown' 和 'modal.hidden' ，把自身作为一个参数来传递。

方法

initialize(可选)

创建一个新的模型控制器示例。

参数 类型 详情
options 对象 一个选项对象具有一下属性： {object=} 范围 子类的范围。默认：创建一个$rootScope子类。 {string=} 动画 带有显示或隐藏的动画。默认：'slide-in-up' {boolean=} 第一个输入框获取焦点 当显示时，模型的第一个输入元素是否自动获取焦点。默认：false。 {boolean=}backdropClickToClose` 点击背景时是否关闭模型。默认：true。

show()

显示模型实例

返回值: promise promise对象,在模型完成动画后得到解析

hide()

隐藏模型。

返回值: promise promise对象,在模型完成动画后得到解析

remove()

从 DOM 中移除模型实例并清理。

返回值: promise promise对象,在模型完成动画后得到解析

isShown()

返回：布尔值，用于判断模型是否显示。

实例

HTML 代码

<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
<title>菜鸟教程(runoob.com)</title>
<link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">
<script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script>
</head>
<body ng-controller="AppCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Contacts</h1>
<div class="buttons">
<button class="button button-icon ion-compose" ng-click="modal.show()">
</button>
</div>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ng-repeat="contact in contacts">
{{contact.name}}
</ion-item>
</ion-list>
</ion-content>
<script id="templates/modal.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar class="bar bar-header bar-positive">
<h1 class="title">New Contact</h1>
<button class="button button-clear button-primary" ng-click="modal.hide()">Cancel</button>
</ion-header-bar>
<ion-content class="padding">
<div class="list">
<label class="item item-input">
<span class="input-label">First Name</span>
<input ng-model="newUser.firstName" type="text">
</label>
<label class="item item-input">
<span class="input-label">Last Name</span>
<input ng-model="newUser.lastName" type="text">
</label>
<label class="item item-input">
<span class="input-label">Email</span>
<input ng-model="newUser.email" type="text">
</label>
<button class="button button-full button-positive" ng-click="createContact(newUser)">Create</button>
</div>
</ion-content>
</ion-modal-view>
</script>
</body>
</html>

CSS 代码

body {
cursor: url('http://www.runoob.com/try/demo_source/finger.png'), auto;
}

JavaScript 代码

angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope, $ionicModal) {
$scope.contacts = [
{ name: 'Gordon Freeman' },
{ name: 'Barney Calhoun' },
{ name: 'Lamarr the Headcrab' },
];
$ionicModal.fromTemplateUrl('templates/modal.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
$scope.createContact = function(u) { 
$scope.contacts.push({ name: u.firstName + ' ' + u.lastName });
$scope.modal.hide();
};
});

完整源码：

<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="http://cdn.bootcss.com/ionic/1.0.1/css/ionic.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/ionic/1.0.1/js/ionic.bundle.min.js"></script>
<style>
body {
cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
</style>
<script>
angular.module('ionicApp', ['ionic']
.controller('AppCtrl', function($scope, $ionicModal) {
$scope.contacts = [
{ name: 'Gordon Freeman' },
{ name: 'Barney Calhoun' },
{ name: 'Lamarr the Headcrab' },
];
$ionicModal.fromTemplateUrl('templates/modal.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
$scope.createContact = function(u) { 
$scope.contacts.push({ name: u.firstName + ' ' + u.lastName });
$scope.modal.hide();
};
});
</script>
</head>
<body ng-controller="AppCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Contacts</h1>
<div class="buttons">
<button class="button button-icon ion-compose" ng-click="modal.show()">
</button>
</div>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ng-repeat="contact in contacts">
{{contact.name}}
</ion-item>
</ion-list>
</ion-content>
<script id="templates/modal.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar class="bar bar-header bar-positive">
<h1 class="title">New Contact</h1>
<button class="button button-clear button-primary" ng-click="modal.hide()">Cancel</button>
</ion-header-bar>
<ion-content class="padding">
<div class="list">
<label class="item item-input">
<span class="input-label">First Name</span>
<input ng-model="newUser.firstName" type="text">
</label>
<label class="item item-input">
<span class="input-label">Last Name</span>
<input ng-model="newUser.lastName" type="text">
</label>
<label class="item item-input">
<span class="input-label">Email</span>
<input ng-model="newUser.email" type="text">
</label>
<button class="button button-full button-positive" ng-click="createContact(newUser)">Create</button>
</div>
</ion-content>
</ion-modal-view>
</script>
</body>
</html>

ionic js 模型 $ionicModal 可以遮住用户主界面的内容框ionic js 模型 $ionicModal 可以遮住用户主界面的内容框

ionic js 模型 $ionicModal 可以遮住用户主界面的内容框

- Author -

yongbin668

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
TextArea 控件的最大长度问题(js json)
Dec 16 Javascript
IE下js调试工具Companion.JS
Oct 15 Javascript
基于jQuery实现在线选座之高铁版
Aug 24 Javascript
基于jquery实现图片相关操作（重绘、获取尺寸、调整大小、缩放）
Dec 25 Javascript
简单谈谈json跨域
Mar 13 Javascript
Easyui 之 Treegrid 笔记
Apr 29 Javascript
利用node.js实现反向代理的方法详解
Jul 24 Javascript
微信小程序自定义组件实现tabs选项卡功能
Jul 14 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 Javascript
ES6基础之 Promise 对象用法实例详解
Aug 22 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
Feb 16 Javascript
jquery插件实现代码雨特效
Apr 24 jQuery
JavaScript sort数组排序方法和自我实现排序方法小结
Jun 06 #Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 #Javascript
基于JS实现数字+字母+中文的混合排序方法
Jun 06 #Javascript
jquery树形菜单效果的简单实例
Jun 06 #Javascript
逻辑表达式中与或非的用法详解
Jun 06 #Javascript
node.js 中国天气预报 简单实现
Jun 06 #Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 #Javascript
T-SQL(1) 临时表(1) 重复数据(2) NFS(1) ftpserver(1) 黑名单(1) 批处理(1) Logrotate(1) 排序失效(1) timestamp(1)
You might like
php中$this-&amp;gt;含义分析
2009/11/29 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
PHP批量上传图片的具体实现方法介绍.
2014/02/26 PHP
php使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
2020/04/05 PHP
PHP将session信息存储到数据库的类实例
2015/03/04 PHP
PHP 数组遍历foreach语法结构及实例
2016/06/13 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
javascript实现日期按月份加减
2015/05/15 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
JavaScript入门基础
2015/08/12 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
2015/09/20 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
基于JS对象创建常用方式及原理分析
2017/06/28 Javascript
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
使用express搭建一个简单的查询服务器的方法
2018/02/09 Javascript
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
python中mechanize库的简单使用示例
2014/01/10 Python
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
python编程开发之日期操作实例分析
2015/11/13 Python
python网络编程调用recv函数完整接收数据的三种方法
2017/03/31 Python
python实现简易云音乐播放器
2018/01/04 Python
分享一下Python数据分析常用的8款工具
2018/04/29 Python
Python切片操作深入详解
2018/07/27 Python
Python math库 ln(x)运算的实现及原理
2019/07/17 Python
django认证系统 Authentication使用详解
2019/07/22 Python
python的json中方法及jsonpath模块用法分析
2019/12/06 Python
python重要函数eval多种用法解析
2020/01/14 Python
Python3 实现爬取网站下所有URL方式
2020/01/16 Python
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
青春寄语大全
2014/04/09 职场文书
法人委托书的范本格式
2014/09/11 职场文书
幸福中国演讲稿
2014/09/12 职场文书
小马王观后感
2015/06/11 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python