Model是用來創(chuàng)建模態(tài)窗口的，但是實際上，并沒有Model指令，而只有$uibModal服務，創(chuàng)建模態(tài)窗口是使用$uibModal.open()方法。
創(chuàng)建模態(tài)窗口時，要有一個模態(tài)窗口的模板和對應的控制器，然后在open()方法的參數(shù)中指定它們。來看一個例子：
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是模態(tài)窗口的實例 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()中可以使用的參數(shù)有：
| 參數(shù)名 | 默認值 | 備注 |
| animation | true | 是否啟用動畫 |
| appendTo | body | 把模態(tài)窗口放在指定的dom元素中。例如$document.find('aside').eq(0) |
| backdrop | true | 打開模態(tài)窗口時的背景設置。可設置的值有：true（顯示灰色背景，在模態(tài)窗口之外單擊會關閉模態(tài)窗口），false （不顯示灰色背景），"static"（顯示灰色背景，在模態(tài)窗口關閉之前背景元素不可用） |
| backdropClass | 為背景添加的類名 | |
| bindToController | false | 設置為true并且使用controllerAs參數(shù)時，$scope的屬性會傳遞給模態(tài)窗口所使用的controller |
| controller | 可以設置為一個表示controller的字符串，或者一個函數(shù)，或者一個數(shù)組（使用數(shù)組標記的方式為控制器注入依賴）。 控制器中可使用$uibModalInstance來表示模態(tài)窗口的實例。 | |
| controllerAs | controller-as語法的替代寫法 | |
| keyboard | true | 是否允許用ESC鍵關閉模態(tài)窗口 |
| openedClass | modal-open | 打開模態(tài)窗口時為body元素增加的類名 |
| resolve | 傳遞到模態(tài)窗口中的對象 | |
| scope | $rootScope | 模態(tài)窗口的父作用域對象 |
| size | 一個字符串，和前綴“model-”組合成類名添加到模態(tài)窗口上 | |
| template | 表示模態(tài)窗口內(nèi)容的文本 | |
| templateUrl | 模態(tài)窗口內(nèi)容的模板url | |
| windowClass | 添加到模態(tài)窗口模板的類名（不是模態(tài)窗口內(nèi)容模板） | |
| windowTemplateUrl | uib/template/modal/window.html | |
| windowTopClass | 添加到頂層模態(tài)窗口的類名 |
全局的設置可以通過$uibModalProvider.options來配置。
使用controller-as語法時，可以為controller注冊一個別名，并且將這個controller當作一個普通的Javascript對象，不需要注入$scope，也不需要將視圖模型的內(nèi)容綁定到$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是模態(tài)窗口的實例 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()來調(diào)用controller的對象
$uibModal.open()方法返回一個模態(tài)窗口實例，這個實例有幾個屬性：
| 屬性名 | 類型 | 說明 |
| close(result) | function | 關閉模態(tài)窗口，傳遞一個結果 |
| dismiss(reason) | function | 取消模態(tài)窗口，傳遞一個原因 |
| result | promise | 一個promise，窗口關閉時為resolved，窗口取消時為rejected |
| opened | promise | 一個promise，窗口打開并下載完內(nèi)容解析了所有變量后，promise為resolved |
| closed | promise | 一個promise，窗口關閉并且動畫結束后為resolved |
| rendered | promise | 一個promise，窗口呈現(xiàn)出來后為resolved |
除了可以使用模態(tài)窗口的實例來關閉和取消窗口（上面例子中的$uibModalInstance.close($scope.selected.item);），和模態(tài)窗口關聯(lián)的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
聯(lián)系客服
