Model是用來創建模態窗口的，但是實際上，並沒有Model指令，而只有$uibModal服務，創建模態窗口是使用$uibModal.open()方法。
創建模態窗口時，要有一個模態窗口的模板和對應的控制器，然后在open()方法的參數中指定它們。來看一個例子：
1 <!DOCTYPE html>
2 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <link href="/Content/bootstrap.css" rel="stylesheet" />
6 <title></title>
7
8 <script src="/Scripts/angular.js"></script>
9 <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>
10 <script>
11 angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('ModalDemoCtrl', function ($scope, $uibModal, $log) { 12
13 $scope.items = ['item1', 'item2', 'item3']; 14
15 $scope.open = function (size) { 16 var modalInstance = $uibModal.open({ 17 templateUrl: 'myModalContent.html', 18 controller: 'ModalInstanceCtrl', 19 backdrop: "static", 20 size: size, 21 resolve: { 22 items1: function () { 23 return $scope.items; 24 } 25 } 26 }); 27
28 modalInstance.result.then(function (selectedItem) { 29 $scope.selected = selectedItem; 30 }, function () { 31 $log.info('Modal dismissed at: ' + new Date()); 32 }); 33 }; 34
35 $scope.toggleAnimation = function () { 36 $scope.animationsEnabled = !$scope.animationsEnabled; 37 }; 38
39 }); 40
41 //$uibModalInstance是模態窗口的實例
42 angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items1) { 43 $scope.items = items1; 44 $scope.selected = { 45 item: $scope.items[0] 46 }; 47
48 $scope.ok = function () { 49 $uibModalInstance.close($scope.selected.item); 50 }; 51
52 $scope.cancel = function () { 53 $uibModalInstance.dismiss('cancel'); 54 }; 55 }); 56 </script>
57
58 </head>
59 <body>
60 <div ng-controller="ModalDemoCtrl">
61 <script type="text/ng-template" id="myModalContent.html">
62 <div class="modal-header">
63 <h3 class="modal-title">I'm a modal!</h3> 64 </div> 65 <div class="modal-body"> 66 <ul> 67 <li ng-repeat="item in items"> 68 <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a> 69 </li> 70 </ul> 71 Selected: <b>{{ selected.item }}</b> 72 </div> 73 <div class="modal-footer"> 74 <button class="btn btn-primary" type="button" ng-click="ok()">OK</button> 75 <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button> 76 </div> 77 </script> 78
79 <button type="button" class="btn btn-default" ng-click="open()">Open me!</button> 80 <button type="button" class="btn btn-default" ng-click="open('lg')">Large modal</button> 81 <button type="button" class="btn btn-default" ng-click="open('sm')">Small modal</button> 82 <div ng-show="selected">Selection from a modal: {{ selected }}</div> 83 </div> 84 </body> 85 </html>
背景為灰色，不可操作。效果是這樣：
open()中可以使用的參數有：
| 參數名 | 默認值 | 備注 |
| animation | true | 是否啟用動畫 |
| appendTo | body | 把模態窗口放在指定的dom元素中。例如$document.find('aside').eq(0) |
| backdrop | true | 打開模態窗口時的背景設置。可設置的值有：true（顯示灰色背景，在模態窗口之外單擊會關閉模態窗口），false （不顯示灰色背景），"static"（顯示灰色背景，在模態窗口關閉之前背景元素不可用） |
| backdropClass | 為背景添加的類名 | |
| bindToController | false | 設置為true並且使用controllerAs參數時，$scope的屬性會傳遞給模態窗口所使用的controller |
| controller | 可以設置為一個表示controller的字符串，或者一個函數，或者一個數組（使用數組標記的方式為控制器注入依賴）。 控制器中可使用$uibModalInstance來表示模態窗口的實例。 |
|
| controllerAs | controller-as語法的替代寫法 | |
| keyboard | true | 是否允許用ESC鍵關閉模態窗口 |
| openedClass | modal-open | 打開模態窗口時為body元素增加的類名 |
| resolve | 傳遞到模態窗口中的對象 | |
| scope | $rootScope | 模態窗口的父作用域對象 |
| size | 一個字符串，和前綴“model-”組合成類名添加到模態窗口上 | |
| template | 表示模態窗口內容的文本 | |
| templateUrl | 模態窗口內容的模板url | |
| windowClass | 添加到模態窗口模板的類名（不是模態窗口內容模板） | |
| windowTemplateUrl | uib/template/modal/window.html | |
| windowTopClass | 添加到頂層模態窗口的類名 |
全局的設置可以通過$uibModalProvider.options來配置。
使用controller-as語法時，可以為controller注冊一個別名，並且將這個controller當作一個普通的Javascript對象，不需要注入$scope，也不需要將視圖模型的內容綁定到$scope上。
有兩種方式使用controller-as語法：
1 在controller中指定controller:"ModalInstanceCtrl as vm"（不使用controllerAs屬性）
2 在controllerAs屬性中指定controllerAs:"vm"
這兩種方式的效果是一樣的。來看這個例子：
1 <!DOCTYPE html>
2 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <link href="/Content/bootstrap.css" rel="stylesheet" />
6 <title></title>
7
8 <script src="/Scripts/angular.js"></script>
9 <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>
10 <script>
11 angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('ModalDemoCtrl', function ($scope, $uibModal, $log) { 12
13 $scope.items = ['item1', 'item2', 'item3']; 14
15 $scope.open = function (size) { 16 var modalInstance = $uibModal.open({ 17 animation: $scope.animationsEnabled, 18 templateUrl: 'myModalContent.html', 19 controller: 'ModalInstanceCtrl', 20 controllerAs: 'vm', 21 backdrop: "static", 22 size: size, 23 resolve: { 24 items1: function () { 25 return $scope.items; 26 } 27 } 28 }); 29
30 modalInstance.result.then(function (selectedItem) { 31 $scope.selected = selectedItem; 32 }, function () { 33 $log.info('Modal dismissed at: ' + new Date()); 34 }); 35 }; 36
37 $scope.toggleAnimation = function () { 38 $scope.animationsEnabled = !$scope.animationsEnabled; 39 }; 40
41 }); 42
43 //$uibModalInstance是模態窗口的實例
44 angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($uibModalInstance, items1) { 45 this.items = items1; 46 this.selected = { 47 item: this.items[0] 48 }; 49
50 this.ok = function () { 51 $uibModalInstance.close(this.selected.item); 52 }; 53
54 this.cancel = function () { 55 $uibModalInstance.dismiss('cancel'); 56 }; 57
58 }); 59 </script>
60
61 </head>
62 <body>
63 <div ng-controller="ModalDemoCtrl">
64 <script type="text/ng-template" id="myModalContent.html">
65 <div class="modal-header">
66 <h3 class="modal-title">I'm a modal!</h3> 67 </div> 68 <div class="modal-body"> 69 <ul> 70 <li ng-repeat="item in vm.items"> 71 <a href="#" ng-click="$event.preventDefault(); vm.selected.item = item">{{ item }}</a> 72 </li> 73 </ul> 74 Selected: <b>{{ vm.selected.item }}</b> 75 </div> 76 <div class="modal-footer"> 77 <button class="btn btn-primary" type="button" ng-click="vm.ok()">OK</button> 78 <button class="btn btn-warning" type="button" ng-click="vm.cancel()">Cancel</button> 79 </div> 80 </script> 81
82 <button type="button" class="btn btn-default" ng-click="open()">Open me!</button> 83 <button type="button" class="btn btn-default" ng-click="open('lg')">Large modal</button> 84 <button type="button" class="btn btn-default" ng-click="open('sm')">Small modal</button> 85 <div ng-show="selected">Selection from a modal: {{ selected }}</div> 86 </div> 87 </body> 88 </html>
這個例子中，ModalInstanceCtrl的別名是vm，ModalInstanceCtrl沒有注入$scope，所有的屬性都使用this綁定到controller對象本身，在視圖中使用vm.Items或者vm.ok()來調用controller的對象
$uibModal.open()方法返回一個模態窗口實例，這個實例有幾個屬性：
| 屬性名 | 類型 | 說明 |
| close(result) | function | 關閉模態窗口，傳遞一個結果 |
| dismiss(reason) | function | 取消模態窗口，傳遞一個原因 |
| result | promise | 一個promise，窗口關閉時為resolved，窗口取消時為rejected |
| opened | promise | 一個promise，窗口打開並下載完內容解析了所有變量后，promise為resolved |
| closed | promise | 一個promise，窗口關閉並且動畫結束后為resolved |
| rendered | promise | 一個promise，窗口呈現出來后為resolved |
除了可以使用模態窗口的實例來關閉和取消窗口（上面例子中的$uibModalInstance.close($scope.selected.item);），和模態窗口關聯的scope也可以關閉和取消窗口。如：
1 angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items1) { 2 $scope.items = items1; 3 $scope.selected = { 4 item: $scope.items[0] 5 }; 6
7 $scope.ok = function () { 8 $scope.$close("aa"); 9 }; 10
11 $scope.cancel = function () { 12 $scope.$dismiss("cancel"); 13 }; 14 });
目錄：
AngularJs的UI組件ui-Bootstrap分享（一）
AngularJs的UI組件ui-Bootstrap分享（二）——Collapse
AngularJs的UI組件ui-Bootstrap分享（三）——Accordion
AngularJs的UI組件ui-Bootstrap分享（四）——Datepicker Popup
AngularJs的UI組件ui-Bootstrap分享（五）——Pager和Pagination
AngularJs的UI組件ui-Bootstrap分享（六）——Tabs
AngularJs的UI組件ui-Bootstrap分享（七）——Buttons和Dropdown
AngularJs的UI組件ui-Bootstrap分享（八）——Tooltip和Popover
AngularJs的UI組件ui-Bootstrap分享（九）——Alert
AngularJs的UI組件ui-Bootstrap分享（十）——Model
AngularJs的UI組件ui-Bootstrap分享（十一）——Typeahead
AngularJs的UI組件ui-Bootstrap分享（十二）——Rating
AngularJs的UI組件ui-Bootstrap分享（十三）——Progressbar
AngularJs的UI組件ui-Bootstrap分享（十四）——Carousel