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');

        }

    }]);

});