liumang361

导航

AngularJs的UI组件ui-Bootstrap分享(十)——Model

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>
View Code

背景为灰色,不可操作。效果是这样:

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>
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         });
View Code

 


目录:

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


posted on 2016-07-25 22:49  pilixiami  阅读(17709)  评论(1编辑  收藏  举报