angularjs 自定义弹窗指令

Posted liboo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了angularjs 自定义弹窗指令相关的知识,希望对你有一定的参考价值。

由于angularjs 项目中频繁使用弹窗,完全自行编写耗时耗力,所以结合ui-boostrap 中的modal 模块来实现功能

  1. 创建一个公共弹窗服务,在使用的组件中依赖注入后调用弹窗方法
  2. 在最外层组件(其余组件的父组件)注入弹窗服务,并定义调用弹窗的方法;其余组件require 此父组件,调用父组件中的方法
  3. 自定义一个弹窗指令,设置仅属性调用(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
                                });
                            });
                });
            });
        }
    }
}]);
View Code

 

参数解释: 

  • 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 自定义弹窗指令的主要内容,如果未能解决你的问题,请参考以下文章

angularjs Directive自定义指令详解

将 keydown 事件定位到 angularJS 自定义指令

angularjs自定义指令实现分页插件

使用 AngularJS 自定义指令启动 jQuery 函数

angularJS自定义过滤器服务和指令

AngularJS 自定义服务指令