模态框——angular
ui-bootstrap-tpls.js库
$uibModal服务
$uibModalInstance服务
一、在angular中应用modal
$uibModal
使用方法:直接注入到控制器中。
1 .controller('name', function($scope,$uibModal) {
二、" $uibModal.open()"方法返回的是一个modal实例,下面是一些可用参数:
1、animation:设置为false,关闭动画效果。默认"true"。
2、appendTo:给modal设置一个容器。默认:"body"。
3、backdrop:设置false关闭控件背景,默认为"true"。
可能的值:
——"true":有背景可以通过点击背景来关闭控件。
——"false":没有背景。
——"static":有背景,但点击背景不能关闭控件。
4、"backdropClass":给背景添加一个样式类。
5、"controller":为modal内容添加控制器。
6、"keyboard":设置modal是否可以通过按键"ESC"关闭,默认:"true"。
7、"openedClass":modal打开时,为html body 添加样式类。
8、"size":设置modal的大小。
可能的值:
——"lg"
——"sm"
9、"template":设置modal内容。
10、"templateUrl":通过引入html来设置modal的内容。
11、"windowClass":为modal添加样式类。
12、"windowTopClass":为当前modal添加样式类。
13、"resolve":调用控制器与modal控制器中传递值。
三、下面是$uibModalInstance一些可用的对象:
1、"$uibModalInstance.dismiss();"——取消modal
2、"$uibModalInstance.close();"——关闭modal
参考资料1:【https://github.com/angular-ui/bootstrap/tree/master/src/modal/docs】
参考资料2:【https://my.oschina.net/codingBingo/blog/715869】