工作中学习用到的，简单记录，同时自己也整理下思路
一、基本方法讲解
$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;
} 