首页
所有分类
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 相关文章推荐
JQuery jsonp 使用示例代码
Aug 12 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
Jan 16 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
Jun 09 Javascript
10个很棒的jQuery代码片段
Sep 24 Javascript
js对象浅拷贝和深拷贝详解
Sep 05 Javascript
使用Node.js实现RESTful API的示例
Aug 01 Javascript
nginx配置React静态页面的方法教程
Nov 03 Javascript
jfinal与bootstrap的登出实战详解
Nov 27 Javascript
vue.js实现带日期星期的数字时钟功能示例
Aug 28 Javascript
vue分页器组件编写方法详解
Jun 28 Javascript
layui动态表头的实现代码
Aug 22 Javascript
Layui选项卡制作历史浏览记录的方法
Sep 28 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
Django(9) Selenium(1) Switch(1) Spring JPA(1) filter(1) EditText(1) openEuler(1) Spring Bean(1) TextInputLayout(1) Tsmoothie(1)
You might like
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
桌面中心(三)修改数据库
2006/10/09 PHP
php 分页原理详解
2009/08/21 PHP
PHP屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2013/03/06 PHP
PHP根据IP判断地区名信息的示例代码
2014/03/03 PHP
浅析php创建者模式
2014/11/25 PHP
PHP的serialize序列化数据以及JSON格式化数据分析
2015/10/10 PHP
PHP实现数组array转换成xml的方法
2016/07/19 PHP
JS 遮照层实现代码
2010/03/31 Javascript
通过判断JavaScript的版本实现执行不同的代码
2010/05/11 Javascript
JavaScript中“+”的陷阱深刻理解
2012/12/04 Javascript
JavaScript中的style.display属性操作
2013/03/27 Javascript
使用变量动态设置js的属性名
2014/10/19 Javascript
JavaScript仿静态分页实现方法
2015/08/04 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
JS文件中加载jquery.js的实例代码
2018/05/05 jQuery
vue 监听屏幕高度的实例
2018/09/05 Javascript
React实现类似淘宝tab居中切换效果的示例代码
2020/06/02 Javascript
Python求导数的方法
2015/05/09 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
python实现五子棋人机对战游戏
2020/03/25 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
Python通过TensorFLow进行线性模型训练原理与实现方法详解
2020/01/15 Python
HTML5 input placeholder 颜色修改示例
2014/05/30 HTML / CSS
HTML5新特性之语义化标签
2017/10/31 HTML / CSS
Spartoo美国：欧洲排名第一的在线时装零售商
2019/12/12 全球购物
自我评价是什么
2014/01/04 职场文书
出国导师推荐信
2014/01/16 职场文书
八项规定整改方案
2014/02/21 职场文书
企业业务员岗位职责
2014/03/14 职场文书
勤俭节约主题班会
2015/08/13 职场文书
Python实现8种常用抽样方法
2021/06/27 Python
javascript代码简写的几种常用方式汇总
2021/08/23 Javascript