在实际开发的过程中点击一个按钮或者文字弹出一个modal是很常见的问题，为了方便初学者更好的使用modal我做了一下总结：
直接上代码：
head部分：
|
1
2
3
|
|
html部分：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<
body
ng-app
=
"myApp"
style
=
"background:#4A4A4A"
class
=
"row"
>
<
div
style
=
"color:#fff; font-size:30px; font-weight:bold; text-shadow:3px 3px 3px #ccc;-webkit-text-shadow:3px 3px 3px #ccc; text-align:center; margin-top:30px;"
>FE-演示平台</
div
>
<
section
class
=
"row"
>
<
section
ng-controller
=
"modalDemo"
class
=
"col-md-6"
style
=
"margin:40px auto; float:none; background:#fff; padding:30px;"
>
<
script
type
=
"text/ng-template"
id
=
"myModelContent.html"
> //创建一个局部视图，需要的时候引用它， 下面会用到 script部分
代码可以独立写成一个html文件
<
div
class
=
"modal-header"
>
// modal头部 。body footer 类推
<
h3
class
=
"modal-title"
>html5jq模态框</
h3
>
</
div
>
<
div
class
=
"modal-body"
>
<
ul
>
<
li
ng-repeat
=
"item in items"
>
<
a
ng-click
=
"selected.item = item"
>{{item}}</
a
> //显示当前点击的item
</
li
>
当前选择： <
b
>{{selected.item}}</
b
>
</
ul
>
</
div
>
<
div
class
=
"modal-footer"
>
<
button
class
=
"btn btn-primary"
ng-click
=
"ok()"
>
确认
</
button
>
<
button
class
=
"btn btn-warning"
ng-click
=
"cancel()"
>退出</
button
>
</
div
>
</
script
>
<
button
class
=
"btn btn-info"
ng-click
=
"open()"
>点我！</
button
>
<
button
class
=
"btn btn-default"
ng-click = "open('lg')">大模态</
button
> //lg 大模态，sm小模态
<
button
class
=
"btn btn-default"
ng-click = "open('sm')">小模态</
button
>
<
hr
>
<
div
ng-show
=
"selected"
>当前选择：{{selected}}</
div
>
</
section
>
</
section
>
</
body
>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<script>
angular.module(
'myApp'
,[
'ui.bootstrap'
]).controller(
'modalDemo'
,
function
($scope,$modal,$log){
//
$scope.items
= [
'html5'
,
'jq'
,
'FE-演示平台'
];
$scope.open =
function
(size){
//打开模态
var
modalInstance = $modal.open({
templateUrl :
'myModelContent.html'
,
//创建的视图，即modal对应的html文件
controller :
'ModalInstanceCtrl'
,
// 初始化模态范围，即该modal的controller
size : size,
//大小配置不能自定义大小，只能是sm，md，lg等这些值
resolve : {
//定义一个成员并将他传递给$modal指定的控制器，相当于routes的一个reslove属性，如果需要传递一个objec对象，需要使用angular.copy()，注意黄色背景区域
items
:
function
(){
return
$scope.items
;
}
}
})
x.x.x.x.x//在这可以把父controller的变量进行传递
，以便modal的controller使用
eg:modalInstance.orderId = $scope.orderId;在controller中可以使用$modalInstance.orderId来
使用父控制器的$scope.orderId，如果是二级的命名($scope.XX.XX)则不需要通过这个变量传递直接在子控制器中
使用即可
modalInstance.result.then(
function
(selectedItem){//$modalInstance.close()正常关闭后执行的函数
$scope.selected = selectedItem;
},
function
(){//$modalInstance.
$log.info(
'Modal dismissed at: '
+
new
Date())
})
}
})
angular.module(
'myApp'
).controller(
'ModalInstanceCtrl'
,
function
($scope,$modalInstance,
items
){
//依赖于$modalInstance必须先注入
$scope.items = items;
$scope.selected = {
item : $scope.items[0]
};
$scope.ok =
function
(){
$modalInstance.close($scope.selected.item);
//关闭并返回当前选项
};
$scope.cancel =
function
(){
$modalInstance.dismiss(
'cancel'
);
// 退出或者取消
}
})
</script>
|
知识点解析：
$modal是一个可以迅速创建模态窗口的服务，创建部分页，控制器，并关联他们
$modal仅有一个方法open(options)
templateUrl：模态窗口的地址template：用于显示html标签scope：一个作用域为模态的内容使用（事实上，$modal会创建一个当前作用域的子作用域）默认为$rootScopecontroller：为$modal指定的控制器，初始化$scope，该控制器可用$modalInstance注入resolve：定义一个成员并将他传递给$modal指定的控制器，相当于routes的一个reslove属性，如果需要传递一个objec对象，需要使用angular.copy()backdrop：控制背景，允许的值：true（默认），false（无背景），“static” - 背景是存在的，但点击模态窗口之外时，模态窗口不关闭keyboard：当按下Esc时，模态对话框是否关闭，默认为turewindowClass：指定一个class并被添加到模态窗口中
open方法返回一个模态实例，该实例有如下属性
close(result)：关闭模态窗口并传递一个结果dismiss(reason)：撤销模态方法并传递一个原因result：一个契约，当模态窗口被关闭或撤销时传递opened：一个契约，当模态窗口打开并且加载完内容时传递的变量
另外，$modalInstance扩展了两个方法$close(result)、$dismiss(reason)，这些方法很容易关闭窗口并且不需要额外的控制器