最近发现网上对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 | 模态框已渲染 |