在實際開發的過程中點擊一個按鈕或者文字彈出一個modal是很常見的問題，爲了方便初學者更好的使用modal我做了一下總結：
直接上代碼：
head部分：|
1
2
3
|
|
html部分：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<body ng-app="myApp" style="background:#4A4A4A" class="row"> <div style="color:#fff; font-size:30px; font-weight:bold; text-shadow:3px 3px 3px #ccc;-webkit-text-shadow:3px 3px 3px #ccc; text-align:center; margin-top:30px;">FE-演示平臺</div> <section class="row" > <section ng-controller="modalDemo" class="col-md-6" style="margin:40px auto; float:none; background:#fff; padding:30px;"> <script type="text/ng-template" id="myModelContent.html"> //創建一個局部視圖，需要的時候引用它， 下面會用到
script部分代碼可以獨立寫成一個html文件 <div class="modal-header"> // modal頭部 。body footer 類推 <h3 class="modal-title">html5jq模態框</h3> </div> <div class="modal-body"> <ul> <li ng-repeat="item in items"> <a ng-click="selected.item = item">{{item}}</a> //顯示當前點擊的item </li> 當前選擇： <b>{{selected.item}}</b> </ul> </div> <div class="modal-footer"> <button class="btn btn-primary" ng-click="ok()"> 確認 </button> <button class="btn btn-warning" ng-click="cancel()">退出</button> </div> </script> <button class="btn btn-info" ng-click="open()">點我！</button> <button class="btn btn-default" ng-click = "open('lg')">大模態</button> //lg 大模態，sm小模態 <button class="btn btn-default" ng-click = "open('sm')">小模態</button> <hr> <div ng-show="selected">當前選擇：{{selected}}</div> </section> </section></body> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<script> angular.module('myApp',['ui.bootstrap']).controller('modalDemo',function($scope,$modal,$log){ // $scope.items = ['html5','jq','FE-演示平臺']; $scope.open = function(size){ //打開模態 var modalInstance = $modal.open({ templateUrl : 'myModelContent.html', //創建的視圖，即modal對應的html文件 controller : 'ModalInstanceCtrl',// 初始化模態範圍，即該modal的controller size : size, //大小配置不能自定義大小，只能是sm，md，lg等這些值 resolve : {//定義一個成員並將他傳遞給$modal指定的控制器，相當於routes的一個reslove屬性，如果需要傳遞一個objec對象，需要使用angular.copy()，注意黃色背景區域 items : function(){ return $scope.items; } } })
x.x.x.x.x//在這可以把父controller的變量進行傳遞，以便modal的controller使用 eg:modalInstance.orderId = $scope.orderId;在controller中可以使用$modalInstance.orderId來
使用父控制器的$scope.orderId，如果是二級的命名($scope.XX.XX)則不需要通過這個變量傳遞直接在子控制器中
使用即可
modalInstance.result.then(function(selectedItem){//$modalInstance.close()正常關閉後執行的函數 $scope.selected = selectedItem; },function(){//$modalInstance. $log.info('Modal dismissed at: ' + new Date())
}) } }) angular.module('myApp').controller('ModalInstanceCtrl',function($scope,$modalInstance,items){ //依賴於$modalInstance必須先注入 $scope.items = items; $scope.selected = { item : $scope.items[0] }; $scope.ok = function(){ $modalInstance.close($scope.selected.item); //關閉並返回當前選項 }; $scope.cancel = function(){ $modalInstance.dismiss('cancel'); // 退出或者取消 } })</script> |
知識點解析：
$modal是一個可以迅速創建模態窗口的服務，創建部分頁，控制器，並關聯他們
$modal僅有一個方法open(options)
templateUrl：模態窗口的地址template：用於顯示html標籤scope：一個作用域爲模態的內容使用（事實上，$modal會創建一個當前作用域的子作用域）默認爲$rootScopecontroller：爲$modal指定的控制器，初始化$scope，該控制器可用$modalInstance注入resolve：定義一個成員並將他傳遞給$modal指定的控制器，相當於routes的一個reslove屬性，如果需要傳遞一個objec對象，需要使用angular.copy()backdrop：控制背景，允許的值：true（默認），false（無背景），“static” - 背景是存在的，但點擊模態窗口之外時，模態窗口不關閉keyboard：當按下Esc時，模態對話框是否關閉，默認爲turewindowClass：指定一個class並被添加到模態窗口中
open方法返回一個模態實例，該實例有如下屬性
close(result)：關閉模態窗口並傳遞一個結果dismiss(reason)：撤銷模態方法並傳遞一個原因result：一個契約，當模態窗口被關閉或撤銷時傳遞opened：一個契約，當模態窗口打開並且加載完內容時傳遞的變量
另外，$modalInstance擴展了兩個方法$close(result)、$dismiss(reason)，這些方法很容易關閉窗口並且不需要額外的控制器
