Angular学习笔记之几种常见的对话框总结

接触学习Angular这么长时间,项目里面经常碰到会使用弹出对话框(Modal或者Dialog)用起来简单使用,适合对象的创建,修改和提醒等操作。

1 UI Bootstrap 的modal

UI Bootstrap 是AngularUI Team 用AngularJS 编写的 Bootstrap components. 所以常见的 bootstrap 组件都可以尝试在 UI Bootstrap中寻找.
大概样子如此。

由于项目中会用到多个对话框,通常是使用angular 事件机制($broadcast/$on)来触发modal 的展示。所以一般架构是,view层,专门有个总的dialog.ejs(后台使用nodejs开发)里面以ng-template形式存储多个dialog

[html]
1
2
3
4
5
6
7
<script type="text/ng-template" id="dialog.XXXDialog">
<%include dialog.XXXDialog.ejs%>
</script>


<script type="text/ng-template" id="dialog.XXXDialog">
<%include dialog.XXXDialog.ejs%>
</script>

同理,controller层,专门有dialogController 来负责监听($on)所有modal事件。 具体触发事件只需要使用$rootScope.$broadcast(“eventname”) 总的控制controller 内容如下:

[javascript]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
app.controller("dialogController",[function(...){
$scope.$on("new.friend",function(event){
var modalInstance = $modal.open({
backdrop:'static',
templateUrl:'dialog.XXXDialog',// dialog.ejs 里面模板id
controller :"dialog.XXXController",//对应具体modal的controller
windowClass:"colored-header",
resolve : { // 通过resolve 来向具体XXXController注入数据service
yourService:function(){
return XXX ;
}
}
// 其他字段参考官网
})
})
$scope.$on(...) // 其他的触发modal 的事件
}])

具体的每个modal 的处理逻辑只需要写在相应的 controller里面即可。
_记得不要忘记
把相关的模板以及js文件 include到 页面中。

2 angular-strap 的modal

[AngularStrap] 是另一套为AngularJS写的Bootstrap Directives。有一些指令还是比较炫酷好看的。由于modal service名称冲突,angular-strap 里面的modal不能和ui-bootstrap 的modal一起使用。
使用时先引入相应的module

1
angular.module('myApp', ['mgcrea.ngStrap']);

个人感觉angular-strap 实现的modal service 不是太好,Modal show 的时候,在DOM生成是以兄弟节点的形式在触发Button后面插入,这样CSS样式会受到相应父节点的影响。
同时 modal.$hide()不提供 promise服务,无法知道$hide完整 remove的事件从而导致一些样式问题
。同时没有提供resolve 接口可以注入数据,所以几次使用都是直接使用继承触发modal时button所在的Controller $scope

3 angular material 中的 dialog

Angular Material 使用angularjs实现的基于google material design的样式组件。也是最近才发现接触的,感觉做的更是炫酷。提供$mdDialog service 效果如下:

使用起来和ui-bootstrap modal 相似,同时可以和ui-bootstrap的 modal共同使用。

1
2
3
4
5
6
7
8
9
10
11
12
// 记得在相应dialog.ejs 里面添加 ng-template : dialog.XXXDialog
// 以及生成新的 dialog.XXXDialogController
$mdDialog.show({
controller: 'dialog.XXXDialogController',
templateUrl: 'dialog.XXXDialog',
clickOutsideToClose: true ,
resolve : {
dataService : function(){
return XXX;
}
}
})

先写这些,很是零碎。

知识共享许可协议