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 可以遮住用户主界面的内容框

Javascript 相关文章推荐
JQuery获取当前屏幕的高度宽度的实现代码
Jul 12 Javascript
javascript仿qq界面的折叠菜单实现代码
Dec 12 Javascript
jQuery焦点图插件SaySlide
Dec 21 Javascript
js实现表单提交后不重新刷新当前页面
Nov 30 Javascript
JS中正则表达式全局匹配模式 /g用法详解
Apr 01 Javascript
JavaScript用200行代码制作打飞机小游戏实例
Jun 21 Javascript
js 概率计算(简单版)
Sep 12 Javascript
Angular实现搜索框及价格上下限功能
Jan 19 Javascript
详解vue-cli下ESlint 配置说明
Sep 03 Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
js中forEach,for in,for of循环的用法示例小结
Mar 14 Javascript
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
You might like
php mssql 数据库分页SQL语句
2008/12/16 PHP
php和mysql中uft-8中文编码乱码的几种解决办法
2012/04/19 PHP
Zend Framework框架中实现Ajax的方法示例
2017/06/27 PHP
php删除二维数组中的重复值方法
2018/03/12 PHP
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
2013/01/15 Javascript
jquery ajax提交整个表单元素的快捷办法
2013/03/27 Javascript
js写一个字符串转成驼峰的实例
2013/06/21 Javascript
按下回车键指向下一个位置的一个函数代码
2014/03/10 Javascript
node.js中的fs.chown方法使用说明
2014/12/16 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
理解和运用JavaScript的闭包机制
2015/08/13 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
2016/05/03 Javascript
深入理解JavaScript中的for循环
2017/02/07 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
jQuery插件之validation插件
2017/03/29 jQuery
代码分析vue中如何配置less
2018/09/28 Javascript
vue穿梭框实现上下移动
2021/01/29 Vue.js
[06:37]2014DOTA2国际邀请赛 昔日王者渴望重回巅峰
2014/07/12 DOTA
python中使用smtplib和email模块发送邮件实例
2014/04/22 Python
详解如何用django实现redirect的几种方法总结
2018/11/22 Python
Python实现繁体中文与简体中文相互转换的方法示例
2018/12/18 Python
在Python中使用Neo4j的方法
2019/03/14 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
Java方面的关于数组和继承的笔面试题
2015/09/18 面试题
乡下人家教学反思
2014/02/01 职场文书
信息科学与技术专业求职信范文
2014/02/20 职场文书
合作意向协议书范本
2014/03/31 职场文书
政府门卫岗位职责
2014/04/29 职场文书
南京市纪委监察局整改方案
2014/09/16 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
简历中自我评价范文
2015/03/11 职场文书
放假通知范文
2015/04/14 职场文书
公司会议开幕词
2016/03/03 职场文书