由于angularjs 项目中频繁使用弹窗，完全自行编写耗时耗力，所以结合ui-boostrap 中的modal 模块来实现功能
- 创建一个公共弹窗服务，在使用的组件中依赖注入后调用弹窗方法
- 在最外层组件（其余组件的父组件）注入弹窗服务，并定义调用弹窗的方法；其余组件require 此父组件，调用父组件中的方法
- 自定义一个弹窗指令，设置仅属性调用（restrict: 'A'），在主模块注入后，即可全局调用
经过一步步实践和优化后，尽量减少中间环节，最终确认使用自定义指令来实现弹窗功能。
js 及css 文件引入：
<link href="css/main.css" rel="stylesheet" /> <link href="plugins/bootstrap/css/bootstrap.css" rel="stylesheet" /> <script src="js/ocLazyLoad.js"></script> <script src="js/drag.js"></script> <script src="js/angular.js"></script> <script src="js/ui-bootstrap-tpls"></script>
自定义弹窗指令：
angular.module('common', [
'ui.bootstrap',
'oc.lazyLoad'
])
.directive('uibModal',['$uibModal','$ocLazyLoad',function($uibModal,$ocLazyLoad){
return {
restrict: 'A',
scope: {
uibModal: '='
},
link: function(scope,element,attr){
element.on('click', function() {
//动态加载组件,在组件加载完成后打开弹窗
$ocLazyLoad
.load(scope.uibModal.path)
.then(function(){
//弹窗打开方法
$uibModal.open({
animation:false,
size:scope.uibModal.size?scope.uibModal.size:'',
backdrop:'static',
component: scope.uibModal.component,
resolve:{
//获取所点击元素内容作为标题
title:function(){
return element.context.innerHTML;
},
//传入组件的数据
data:function(){
return scope.uibModal.data;
}
}
}).rendered.then(function(){
//弹窗显示出来后，绑定拖拽功能
$('.modal-content').drag(function(ev,dd){
$(this).css({
top: dd.offsetY,
left: dd.offsetX
});
},{
handle:'.modal-header',
relative:true
});
});
});
});
}
}
}]);