工作中學習用到的，簡單記錄，同時自己也整理下思路

一、基本方法講解

$modal是一個創建模態窗口的服務，僅有一個方法open(options)

1、參數如下：
?templateUrl：模態窗口的地址
?template：用于顯示html標簽
?scope：一個作用域為模態的內容使用（事實上，rootScope
?controller：為scope，該控制器可用modal指定的控制器，相當于routes的一個reslove屬性，如果需要傳遞一個objec對象，需要使用angular.copy()
?backdrop：控制背景，允許的值：true（默認），false（無背景），“static” - 背景是存在的，但點擊模態窗口之外時，模態窗口不關閉
?keyboard：當按下Esc時，模態對話框是否關閉，默認為ture
? wndowClass：指定一個class并被添加到模態窗口中

2、open方法返回一個模態實例，該實例屬性：
?close(result)：關閉模態窗口并傳遞一個結果
?dismiss(reason)：撤銷模態方法并傳遞一個原因
?result：一個契約，當模態窗口被關閉或撤銷時傳遞
?opened：一個契約，當模態窗口打開并且加載完內容時傳遞的變量

另，close(result)、$dismiss(reason)，容易關閉窗口并不需額外的控制器

二、代碼實現

0、引入文件
link rel="stylesheet" href="/bootstrap.min.css"><script src="angularjs/1.2.5/angular.min.js"></script><script src="angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js"></script>
1、單擊按鈕打開模態窗
a type="submit" class="btn btn-primary btn-addon pull-left" ng-click="open('lg',data.openId)" >查看歷史</a>
2、單擊事件代碼
$scope.open = function(size,openId) { var modalInstance = $modal.open({ templateUrl : 'myModelContent1.html', // controller : 'ModalHisCtrl', // specify controller for modal size : size, resolve : { host : function(){ return $scope.app.host; }, openId : function(){ return openId; //得到html頁面中的數據 } } }); modalInstance.result.then(function(selectedItem) { }, function() { $log.info('Modal dismissed at: ' + new Date()); }); }
3、模板控制器
app.controller('ModalHisCtrl', function($scope,$http, $modalInstance,host,openId){ $scope.gethisList = function(page,size,callback){ var url = host + 'experience/student/buy/list?requestId=123456'; $http.post(url,{ "currentPage":page, "pageSize":size, "openId": openId //以參數的形式獲得 }).success(function(data){ if(data.message == "Success"){ $scope.results = data.result; $scope.totalPage = data.result.totalPage; callback && callback(data.result); } }).error(function(data){ console.log("fail"); }); }; $scope.cancel = function () { $modalInstance.close(); }; });
4、模板html
<script type="text/ng-template" id="myModelContent1.html"> <div class="modal-header"> 對話框題目 </div> <div class="modal-body" ng-init="gethisList(1,10)"> <h5 ng-if="results.list.length<=0">暫無數據</h5> <table class="table table-striped b-t b-light" ng-if="results.list.length"> <thead> <tr> <th>序號</th> <th>訂單號</th> <th>支付金額</th> <th>創建時間</th> </tr> </thead> <tbody> <tr ng-repeat="data in results.list"> <td>{{$index+1}}</td> <td>{{data.orderNumber}}</td> <td>{{data.paymentAmount}}</td> <td>{{data.createTime | date:'yyyy-MM-dd hh:mm:ss'}}</td> </tr> </tbody> </table> </div> <div class="modal-footer"> <button class="btn btn-default" ng-click="cancel()">關閉</button> </div> </script>

二、附錄

：瀏覽器對話框：

   var r=confirm("確定已--？");
    if(!r){
        return;
    }