AngularJs的UI組件ui-Bootstrap分享（十）——Model

時間 2019-11-18

標籤 angularjs 組件 bootstrap 分享 model 欄目 AngularJS 简体版

原文原文鏈接

Model是用來建立模態窗口的，可是實際上，並無Model指令，而只有$uibModal服務，建立模態窗口是使用$uibModal.open()方法。css

建立模態窗口時，要有一個模態窗口的模板和對應的控制器，而後在open()方法的參數中指定它們。來看一個例子：html

 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>

View Code

背景爲灰色，不可操做。效果是這樣：bootstrap

open()中可使用的參數有：數組

參數名	默認值	備註
animation	true	是否啓用動畫
appendTo	body	把模態窗口放在指定的dom元素中。例如$document.find('aside').eq(0)
backdrop	true	打開模態窗口時的背景設置。可設置的值有：true（顯示灰色背景，在模態窗口以外單擊會關閉模態窗口），falsepromise （不顯示灰色背景），"static"（顯示灰色背景，在模態窗口關閉以前背景元素不可用）app
backdropClass		爲背景添加的類名
bindToController	false	設置爲true而且使用controllerAs參數時，$scope的屬性會傳遞給模態窗口所使用的controller
controller		能夠設置爲一個表示controller的字符串，或者一個函數，或者一個數組（使用數組標記的方式爲控制器注入依賴）。dom 控制器中可以使用$uibModalInstance來表示模態窗口的實例。ide
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>

View Code

這個例子中，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         });