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>
背景为灰色,不可操作。效果是这样:
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
posted on 2016-07-25 22:49 pilixiami 阅读(17718) 评论(1) 编辑 收藏 举报