工作中學(xué)習(xí)用到的虏两，簡單記錄愧旦，同時(shí)自己也整理下思路
一、基本方法講解
$modal是一個(gè)創(chuàng)建模態(tài)窗口的服務(wù)定罢，僅有一個(gè)方法open(options)
1忘瓦、參數(shù)如下：
?templateUrl：模態(tài)窗口的地址
?template：用于顯示html標(biāo)簽
?scope：一個(gè)作用域?yàn)槟B(tài)的內(nèi)容使用（事實(shí)上，rootScope
?controller：為scope耕皮，該控制器可用
modal指定的控制器，相當(dāng)于routes的一個(gè)reslove屬性蝙场，如果需要傳遞一個(gè)objec對象凌停，需要使用angular.copy()
?backdrop：控制背景，允許的值：true（默認(rèn)）售滤，false（無背景）罚拟，“static” - 背景是存在的，但點(diǎn)擊模態(tài)窗口之外時(shí)完箩，模態(tài)窗口不關(guān)閉
?keyboard：當(dāng)按下Esc時(shí)赐俗，模態(tài)對話框是否關(guān)閉，默認(rèn)為ture
? wndowClass：指定一個(gè)class并被添加到模態(tài)窗口中
2弊知、open方法返回一個(gè)模態(tài)實(shí)例阻逮，該實(shí)例屬性：
?close(result)：關(guān)閉模態(tài)窗口并傳遞一個(gè)結(jié)果
?dismiss(reason)：撤銷模態(tài)方法并傳遞一個(gè)原因
?result：一個(gè)契約，當(dāng)模態(tài)窗口被關(guān)閉或撤銷時(shí)傳遞
?opened：一個(gè)契約秩彤，當(dāng)模態(tài)窗口打開并且加載完內(nèi)容時(shí)傳遞的變量
另叔扼，close(result)、$dismiss(reason)漫雷，容易關(guān)閉窗口并不需額外的控制器
二瓜富、代碼實(shí)現(xiàn)
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降盹、單擊按鈕打開模態(tài)窗
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頁面中的數(shù)據(jù) } } }); 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 //以參數(shù)的形式獲得 }).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">暫無數(shù)據(jù)</h5> <table class="table table-striped b-t b-light" ng-if="results.list.length"> <thead> <tr> <th>序號</th> <th>訂單號</th> <th>支付金額</th> <th>創(chuàng)建時(shí)間</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()">關(guān)閉</button> </div> </script>
二价捧、附錄
：瀏覽器對話框：
var r=confirm("確定已--每辟？");
if(!r){
return;
} 