标签：nbsp hide 引入 点击 一个 .com pat 加载完成 set
由于angularjs 项目中频繁使用弹窗，完全自行编写耗时耗力，所以结合ui-boostrap 中的modal 模块来实现功能
经过一步步实践和优化后，尽量减少中间环节，最终确认使用自定义指令来实现弹窗功能。
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, 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 }); }); }); }); } } }]);
参数解释：
前端调用：
<a uib-modal="{path:‘users/detail/component‘,component:‘usersDetail‘,data:user}">查看详情</a> <button type="button" uib-modal="{path:‘users/form/component‘,component:‘usersForm‘}">新建群组</button>
标签：nbsp hide 引入 点击 一个 .com pat 加载完成 set
原文地址：https://www.cnblogs.com/liboo/p/9467121.html
