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 相关文章推荐
javascript笔试题目附答案@20081025_jb51.net
Oct 26 Javascript
JavaScript 基础问答三
Dec 03 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
May 19 Javascript
解析Javascript小括号“()”的多义性
Dec 03 Javascript
javascript中setInterval的用法
Jul 19 Javascript
js获取元素的标签名实现方法
Oct 08 Javascript
React.js中常用的ES6写法总结(推荐)
May 09 Javascript
解决vue-cli中stylus无法使用的问题方法
Jun 19 Javascript
highcharts 在angular中的使用示例代码
Sep 20 Javascript
JS中实现一个下载进度条及播放进度条的代码
Jun 10 Javascript
es6数组includes()用法实例分析
Apr 18 Javascript
echarts浮动显示单位的实现方法示例
Dec 04 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 和 MySQL 基础教程(二)
2006/10/09 PHP
WHOIS类的修改版
2006/10/09 PHP
比较时间段一与时间段二是否有交集的php函数
2011/05/31 PHP
php 缩略图实现函数代码
2011/06/23 PHP
在Mac OS上编译安装Nginx+PHP+MariaDB开发环境的教程
2016/02/23 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
收集的一些Array及String原型对象的扩展实现代码
2010/12/05 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
2011/07/10 Javascript
js 如何实现对数据库的增删改查
2012/11/23 Javascript
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
JavaScript中的类与实例实现方法
2015/01/23 Javascript
jquery实现用户打分评分特效
2015/05/28 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
JavaScript SHA-256加密算法详细代码
2016/10/06 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
微信小程序 页面传值详解
2017/03/10 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
微信小程序与php 实现微信支付的简单实例
2017/06/23 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
python服务器与android客户端socket通信实例
2014/11/12 Python
在Python编程过程中用单元测试法调试代码的介绍
2015/04/02 Python
Python 调用Java实例详解
2017/06/02 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
数组保存为txt, npy, csv 文件, 数组遍历enumerate的方法
2018/07/09 Python
pandas DataFrame行或列的删除方法的实现示例
2019/08/02 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
自我鉴定范文300字
2013/10/01 职场文书
《天游峰的扫路人》教学反思
2014/04/25 职场文书
2014年稽查工作总结
2014/12/20 职场文书
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android