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