如何使用angular-ui的弹出框
在开发项目时,我们经常性的会遇到弹出框的需求,例如登陆,注册,添加信息等等....面对这一需求,我们当然也可以使用自己的双手进行编写,如果你时间充足可以试试。
今天我们讲解一下如何在angular框架的项目中使用弹出框,首先的普及一下,angular是一个发展已久的前端框架,相对比较成熟了,值得庆幸的是angular它有自己的一套ui模块,里面封装了一系列我们项目中需要经常使用并且十分复杂的玩意儿。
这了给出官网地址,有兴趣可以研究研究:http://angular-ui.github.io/bootstrap/versioned-docs/1.3.2/#/accordion
在这里了我们主要讲解一下如何使用angular-ui的弹出框,
首先我们要指出一个难点:如何进行数据的交互....(你可自己思考考)
..........2小时过去了。。。
这里直接给出例子:
一点申明:我的项目中使用了requireJS,
详细描述:
1、使用弹出框的页面(html)<这里只做简单的事例>
路由的配置:
.state('home.ideas.test', {//(测试)
url: '/test',
views: {
"part": {
templateUrl: 'tpls/ideas/test.html',
controller:"idea_test_ctrl"
}
}
})
html:(tpls/ideas/test.html)
<div>
<button ng-click="open_modal()">开</button>
this is test page
</div>
弹出框对应的模板html:(弹出框一般都有一个"确定","取消"按钮,在这两个按钮上我们可以进行一系列的回调操作,例如值的传递)
<div>
{{bbb}}
<input type="text" ng-model="aaa"/>
<button ng-click="ok_click()">确定</button>
<button ng-click="cancle()">取消</button>
</div>
idea_test_ctrl:(js文件)
define(["app"], function (myapp) {
myapp.controller('idea_test_ctrl',
[ '$scope',
'$rootScope',
'$state','$uibModal',
function (s,rs,$state,$uibModal) {
console.log(" 测试的Ctrl");
s.open_modal = function () {
var modalInstance = $uibModal.open({
animation: true,//是否开启动画
templateUrl: 'tpls/ideas/modal_test.html',//弹出框的模板html
controller: 'modal_in_ctrl',//弹出框的模板控制器
size:'lg',//弹出框的大小
resolve: {//resolve:可用于将页面的数据传输到模板控制器中,进而显示到弹出框模板
fnitems: function(){
return "这是从原来控制器带来的值";
},
item2:456
}
});
modalInstance.result.then(function (data) {//第一个回调函数:的data来自s.ok_click,第二个回调函数的值来自s.cancel
console.log(data);
}, function (data) {
console.log(data);
});
};
}]
)
myapp.controller('modal_in_ctrl',["$scope","fnitems","$uibModalInstance",function(s,fnitems,$uibModalInstance){//$uibModalInstance用于接受弹出模板的回调
s.bbb=fnitems;
s.ok_click=function(){
$uibModalInstance.close(s.aaa);
}
s.cancle=function(){
$uibModalInstance.dismiss('这是cancle');
}
}]);
});
如何使用angular-ui的弹出框的更多相关文章
- Element UI - 打开弹出框(el-dialog)页面会抖动
当 dialog 出现时,页面右边缩小了 5px,模态框看起来会抖动 解决方案 发现 body 多了样式:padding-right: 5px 和 overflow: hidden.紧接着我就在全局设 ...
- 基于Selenium2+Java的UI自动化(6)-操作Alert、confirm、prompt弹出框
alert.confirm.prompt这样的js对话框在selenium1 时代处理起来比价麻烦,常常要用autoit来帮助处理.而现在webdriver对这些弹出框做了专门的处理,使用seleni ...
- angularjs 弹出框 $modal
angularjs 弹出框 $modal 标签: angularjs 2015-11-04 09:50 8664人阅读 评论(1) 收藏 举报 分类: Angularjs(3) $modal只有一 ...
- angularjs 弹出框 $modal 参数(转)
angularjs 弹出框 $modal $modal只有一个方法:open,该方法的属性有: templateUrl:模态窗口的地址 template:用于显示html标签 scope:一个作用 ...
- angular-ui-bootstrap弹出框的使用(一)
在开发项目时,我们经常性的会遇到弹出框的需求,例如登陆,注册,添加信息等等....面对这一需求,我们当然也可以使用自己的双手进行编写,如果你时间充足可以试试. 今天我们讲解一下如何在angular框架 ...
- JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
- datePiker弹出框被其他div遮挡
最近在做项目的时候,datePiker弹出框被下面的div给遮挡住了,以前也碰到过这样类似的问题,之前直接在style中添加"z-index:1000".但是现在使用angular ...
- Bootstrap:弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
- jquery dialog-优雅的弹出框
前面一章已经对datepicker的使用,做了简单的说明.这一章主要对dialog如何使用做个说明. jquery ui-dialog在web开发中运用还是比较多的.最常见的例子就是登 ...
随机推荐
- 降低Redis内存占用
1.降低redis内存占用的优点 1.有助于减少创建快照和加载快照所用的时间 2.提升载入AOF文件和重写AOF文件时的效率 3.缩短从服务器进行同步所需的时间 4.无需添加额外的硬件就可以让redi ...
- postman断言作用及怎么使用
这段时间一直在学习postman,在请求中使用断言,很多人不是很了解postman断言,其实呢,postman断言是JavaScript语言编写的,在postman客户端指定区域编写即可. 1.设置环 ...
- JAVA 类总结
JAVA 类总结 最近看了遍java内部类相关的一些内容,做一些总结.与个人博客 zhiheng.me 同步发布,标题: JAVA 类总结. 顶级类与嵌套类 定义在某个类(或接口,下同)内部的类,称为 ...
- Jmeter-线程组
1.Sampler 取样器(Sampler)是性能测试中向服务器发送请求,记录响应信息,记录响应时间的最小单元,JMeter 原生支持多种不同的sampler , 如 HTTP Request Sam ...
- oracle索引(转)
引,索引的建立.修改.删除 2007-10-05 13:29 来源: 作者: 网友评论 0 条 浏览次数 2986 索引索引是关系数据库中用于存放每一条记录的一种对象,主要目的是加快数据的读取速度和完 ...
- 简单的叙述下SQL中行列转换的小知识!
行列转换对于工作还是学习中总是不可避免的会遇到(虽然本人还尚未工作,萌萌哒的学生一枚),解决的方法也有很多,我这里就总结一下我所想解决的问题以及怎么去解决的方法, 可能网上已经有很多类似的方法了,有的 ...
- 在ASP.NET Core中使用Apworks快速开发数据服务
不少关注我博客的朋友都知道我在2009年左右开发过一个名为Apworks的企业级应用程序开发框架,旨在为分布式企业系统软件开发提供面向领域驱动(DDD)的框架级别的解决方案,并对多种系统架构风格提供支 ...
- Java进阶之网络编程
网络编程 网络编程对于很多的初学者来说,都是很向往的一种编程技能,但是很多的初学者却因为很长一段时间无法进入网络编程的大门而放弃了对于该部分技术的学习. 在 学习网络编程以前,很多初学者可能觉得网络编 ...
- 图的基本算法(BFS和DFS)(转载)
图是一种灵活的数据结构,一般作为一种模型用来定义对象之间的关系或联系.对象由顶点(V)表示,而对象之间的关系或者关联则通过图的边(E)来表示. 图可以分为有向图和无向图,一般用G=(V,E)来表示图. ...
- VS窗体选择BackGroupImage属性报错:已添加具有相同键的项
高墙我今天第一次遇见这个问题.既然说是"已添加具有相同键的项."那我自然地认为会不会是文件夹哪里命名了两个相同的文件名.然后在这个Exception上越走越远. 好了不说废话.出现 ...