在开发项目时,我们经常性的会遇到弹出框的需求,例如登陆,注册,添加信息等等....面对这一需求,我们当然也可以使用自己的双手进行编写,如果你时间充足可以试试。

今天我们讲解一下如何在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的弹出框的更多相关文章

  1. Element UI - 打开弹出框(el-dialog)页面会抖动

    当 dialog 出现时,页面右边缩小了 5px,模态框看起来会抖动 解决方案 发现 body 多了样式:padding-right: 5px 和 overflow: hidden.紧接着我就在全局设 ...

  2. 基于Selenium2+Java的UI自动化(6)-操作Alert、confirm、prompt弹出框

    alert.confirm.prompt这样的js对话框在selenium1 时代处理起来比价麻烦,常常要用autoit来帮助处理.而现在webdriver对这些弹出框做了专门的处理,使用seleni ...

  3. angularjs 弹出框 $modal

    angularjs 弹出框 $modal 标签: angularjs 2015-11-04 09:50 8664人阅读 评论(1) 收藏 举报  分类: Angularjs(3)  $modal只有一 ...

  4. angularjs 弹出框 $modal 参数(转)

    angularjs 弹出框 $modal   $modal只有一个方法:open,该方法的属性有: templateUrl:模态窗口的地址 template:用于显示html标签 scope:一个作用 ...

  5. angular-ui-bootstrap弹出框的使用(一)

    在开发项目时,我们经常性的会遇到弹出框的需求,例如登陆,注册,添加信息等等....面对这一需求,我们当然也可以使用自己的双手进行编写,如果你时间充足可以试试. 今天我们讲解一下如何在angular框架 ...

  6. JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

  7. datePiker弹出框被其他div遮挡

    最近在做项目的时候,datePiker弹出框被下面的div给遮挡住了,以前也碰到过这样类似的问题,之前直接在style中添加"z-index:1000".但是现在使用angular ...

  8. Bootstrap:弹出框和提示框效果以及代码展示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

  9. jquery dialog-优雅的弹出框

    前面一章已经对datepicker的使用,做了简单的说明.这一章主要对dialog如何使用做个说明.         jquery ui-dialog在web开发中运用还是比较多的.最常见的例子就是登 ...

随机推荐

  1. VMware Ubuntu16.04虚拟机安装MATLAB R2016b

    因为这学期上的模式识别课程需要在Linux环境下使用Matlab,所以就在Windows10主机上的Vmware Workstation上的Ubuntu虚拟机上安装了最新版本的MATLAB. 环境: ...

  2. 学习CSS了解单位em和px的区别

    这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用p ...

  3. 关于JavaScript中连等赋值那点事

    今天看了前端网上关于JS的题目,其中有一道题目挺有意思的.如下 var a = b =10; (function(){ var a = b = 20; })(); console.log(a); co ...

  4. WebServiceWSDLWeb

    WSDL 文档仅仅是一个简单的 XML 文档. 它包含一系列描述某个 web service 的定义. WSDL 文档是利用这些主要的元素来描述某个 web service 的: 元素 定义 < ...

  5. [认证授权] 2.OAuth2(续) & JSON Web Token

    0. RFC6749还有哪些可以完善的? 0.1. 撤销Token 在上篇[认证授权] 1.OAuth2授权中介绍到了OAuth2可以帮我们解决第三方Client访问受保护资源的问题,但是只提供了如何 ...

  6. vuejs学习笔记(2)--属性,事件绑定,ajax

    属性 v-for 类似于angular中的 ng-repeat ,用于重复生成html片段: <ul id="box"> <li v-for="(v, ...

  7. python+robot framework实现测报告定制化和邮件发送

    前面已经介绍了python+robot framework自动化框架和基本原理的实现,详情请看 python+robot framework接口自动化测试 本章主要讲解报告已经产生那如何以自动化的方式 ...

  8. JavaScript Break 和 Continue 语句

    1.break:终止本层循坏,继续执行本次循坏后面的语句: 当循坏有多层时,break只会跳过一层循坏 2.continue:跳过本次循坏,继续执行下次循坏 对于for循环,continue执行后,继 ...

  9. MarkDown 常用语法教程

    MarkDown 语法说明 [TOC] 标题 标题1 ====== 标题2 ----- ## 大标题 ### 小标题 #### 小标题 列表 无序列表 + 列表文本前使用 [减号+空格] * 列表文本 ...

  10. 什么是RESTful?

    RESTful一种软件架构风格,设计风格而不是标准,只是提供了一组设计原则和约束条件.它主要用于客户端和服务器交互类的软件.基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制. REST ...