angular-ui-bootstrap弹出框的使用(一)
在开发项目时,我们经常性的会遇到弹出框的需求,例如登陆,注册,添加信息等等....面对这一需求,我们当然也可以使用自己的双手进行编写,如果你时间充足可以试试。
今天我们讲解一下如何在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'); } }]); });