Angular : Modal(ui.bootstrap.modal)的使用

最近发现网上对Angular的Modal讲解都比较笼统，所以参考官方文档进行一下翻译、整理，官方文档见：

Modal(ui.bootstrap.modal)

$uibModal是一个用来创建模态框的service，模态框的创建步骤如下：

1. 创建模板（create a template）
2. 为它声明一个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	模态框已渲染