最近发现网上对Angular的Modal讲解都比较笼统,所以参考官方文档进行一下翻译、整理,官方文档见:
$uibModal是一个用来创建模态框的service,模态框的创建步骤如下:
- 创建模板(create a template)
- 为它声明一个Controller
$uibModal只有一个方法:open(options),所有的配置都通过options传给它
options相关参数如下:
| 参数 | 类型 | 默认值 | 含义 |
|---|---|---|---|
| animation | boolean | true | 显示模态框是否带动画效果 |
| appendTo | angular.element | body | 添加到什么元素中 |
| ariaDescribedBy | string | 指定模态框的内容的编号,如div的id | |
| ariaLabelledBy | string | 指定模态框的标题的编号,如div的id | |
| backdrop | boolean [竖线] string | true | 弹出模态框时,背景是否置灰,除了true/false外,还可以指定为'static',即点击背景不能关闭模态框(默认是可以的),示例:backdrop: false [竖线] 'static'
|
| backdropClass | string | 为模态框的backdrop添加额外的css效果 | |
| bindToController | boolean | false | 当设置了controllerAs属性且设置bindToController为true时,会自动为controller注入$scope |
| component | string | 指定通过某个组件渲染,如果使用一个自定义组件(directive),组件必须指定restrict:'E' 且指定了template和templateUrl两个属性,支持如下的绑定:close 关闭模态框的方法,结果格式为{$value: myResult} ; dismiss 隐藏模态框,结果格式为: {$value: myRejectedResult} ; modalInstance 模态框的实例,与 $uibModalInstance 等同 ,当使用controller属性时,可向其注入 |
|
| controller | funcation[竖线]string[竖线]array | 为模态框指定一个Controller,既可以使用controller的名字,也可以直接指定处理方法,还可以通过array指定依赖的注入,controller内,可通过注入的$uibModalInstance 访问模态框的内容 |
|
| controllerAs | string | 一个可选的controller语法,使用时需要指定controller属性 |
|
| keyboard | boolean | true | 按ESC按钮时,是否关闭模态框 |
| openedClass | string | 当模态框打开时,动态添加给body的样式 | |
| resolve | Object | 用于传值 | |
| scope | $scope | 父级的 scope实例 | |
| size | string | 模态框的大小, sm、lg或不填 | |
| template | string | 模态框的模板 | |
| templateUrl | string | 模态框的模板链接,与template必须选择一个 | |
| windowClass | string | 为窗口添加额外的样式 | |
| windowTemplateUrl | string | uib/template/modal/window.html | 可通过指定这个属性重写窗口的样式 |
| windowTopClass | string | 为最上层的窗口添加额外的样式 |
可通过 $uibModalProvider.options 对$uibModal 设置全局属性
返回值
open方法会返回一个模态框的实例,带有下面的属性
| 名称 | 类型 | 含义 |
|---|---|---|
| close(result) | funcation | 关闭模态框,并传入结果 |
| dismiss(reason) | funcation | 隐藏模态框,并传入原因 |
| result | promise | 模态框已关闭 |
| opened | promise | 模态框已打开,并加载完模板跟值 |
| closed | promise | 模态框已关闭,且动画结束 |
| rendered | promise | 模态框已渲染 |