angularjs 自定义弹窗指令
Posted liboo
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了angularjs 自定义弹窗指令相关的知识,希望对你有一定的参考价值。
由于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, 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 }); }); }); }); } } }]);
参数解释:
- path:组件存放路径,按需加载
- component:组件名
- data:传入组件的数据,Object
前端调用:
<a uib-modal="{path:‘users/detail/component‘,component:‘usersDetail‘,data:user}">查看详情</a> <button type="button" uib-modal="{path:‘users/form/component‘,component:‘usersForm‘}">新建群组</button>
以上是关于angularjs 自定义弹窗指令的主要内容,如果未能解决你的问题,请参考以下文章
将 keydown 事件定位到 angularJS 自定义指令