文档章节

angular封装modal,一个modal,多次使用

L
 LorinLuo
发布于 2016/11/21 11:01
字数 271
阅读 50
收藏 0

js:

app.directive("modal", ["$timeout", function ($timeout) {
        return {
            restrict: "AE",
            templateUrl: "/template/modal.html",
            scope: {
                modalData: "=",
                sureCallback: "&",
                clearSearchTerm: "&"
            },
            link: function (scope, element) {
                var modalHeaderHeight, modalFooterHeight, firstShow = true;

                $("body").on("show.bs.modal", "#" + scope.modalData.modalId, function (e) {
                    if ($(".modal-dialog").length > 1) {
                        $(element).find(".modal-dialog").css("margin", $(".modal-dialog").eq(0).css("margin"));
                    }
                });

                $("body").on("shown.bs.modal", "#" + scope.modalData.modalId, function (e) {
                    $.isFunction(scope.modalData.callback) && scope.modalData.callback();

                    if (firstShow) {
                        firstShow = false;
                    } else {
                        return;
                    }

                    modalHeaderHeight = $(element).find(".modal-header").outerHeight(false);
                    modalFooterHeight = $(element).find(".modal-footer").outerHeight(false);

                    $(element).find(".modal-body").css({
                        maxHeight: "calc(100vh - " + (modalHeaderHeight + modalFooterHeight + 60) + "px )",
                        overflowY: "auto"
                    });
                });

                $("body").on("hide.bs.modal", "#" + scope.modalData.modalId, function (e) {
                    if ($.isFunction(scope.clearSearchTerm)) {
                        scope.clearSearchTerm();
                    }
                });

                $(element).on("click", ":not(.md-select-menu-container)", function (event) {
                    $(".md-select-backdrop").click();
                    event.stopPropagation();
                });
            }
        };
    }]).service("modal", ["$timeout", "$compile", function ($timeout, $compile) {
            this.show = function (selector, scope, callback) {
                angular.element("#" + selector).modal("show");

                if ($.isFunction(callback)) {
                    angular.element("#" + selector).off("shown.bs.modal");
                    angular.element("#" + selector).on("shown.bs.modal", function (e) {
                        $.isFunction(callback) && callback();
                        scope && !scope.$$phase && !scope.$root.$$phase && scope.$apply();
                    });
                }
            };

            this.replaceModalBody = function (modalSelector, modalBodyselector, scope) {
                var modalBody = angular.element(modalBodyselector).html();

                modalBody = $compile(modalBody)(scope);
                angular.element(modalSelector).find(".modal-body").html(modalBody);
            };

            this.replaceModalHeader = function (modalSelector, modalHeaderselector, scope) {
                var modalHeader = angular.element(modalHeaderselector).html();

                modalHeader = $compile(modalHeader)(scope);
                angular.element(modalSelector).find(".modal-header").html(modalHeader);
            };
     }]);

    template:

<div class="modal fade" id="{{modalData.modalId}}">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
          <span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" ng-bind="modalData.modalTitle"></h4>
      </div>
      <div class="modal-body" ng-bind-html="modalData.modalBodyContent|trusted_html"></div>
      <div class="modal-footer">
        <md-button md-colors="{color: 'grey-500'}" data-dismiss="modal">Cancel</md-button>
        <md-button md-colors="{color: 'green-500'}" data-dismiss="modal" ng-click="sureCallback()">Submit</md-button>
      </div>
    </div>
  </div>
</div>

© 著作权归作者所有

共有 人打赏支持
L
粉丝 18
博文 166
码字总数 116776
作品 0
成都
程序员
私信 提问
NG Bootstrap 3.0.0 发布,Bootstrap 的 Angular 集成

NG Bootstrap 3.0.0 已发布,NG Bootstrap 是基于 Angular 开发的 Bootstrap CSS 框架的指令集,它是专为 Bootstrap 4 开发的 Angular 组件,由 ui-bootstrap 团队构建。 重要更改: 1、ng-...

王练
2018/08/14
1K
1
我们为什么以及是如何从 Angular.js 迁移到 Vue.js?

在我写这篇文章的时候,我们刚刚从我们的应用程序代码库中删除了最后一行AngularJS代码,结束了一个为期4个月的非侵入性工作,将我们的应用程序从AngularJS迁移到VueJS。在这篇文章中,我将分...

oschina
2017/10/19
11.1K
43
Ionic 4.0.0-rc.0 发布,混合应用的前端开发框架

Ionic 4.0.0 首个 RC 版 4.0.0-rc.0 发布了,该版本的更新内容不多,主要是 bug 修复和引入新特性。 Bug Fixes action-sheet: set 100% height to fix scrollable options (#16789) (e3d728...

程六金
2018/12/21
0
0
NG-ZORRO 7.0.0-rc.1 发布,Ant Design 的 Angular 实现

NG-ZORRO 7.0.0-rc.1 发布了,NG-ZORRO 是 Ant Design 的 Angular 实现,用于开发和服务于企业级后台产品。 特性 提炼自企业级中后台产品的交互语言和视觉风格。 开箱即用的高质量 Angular ...

局长
2018/12/15
0
0
使用 AngularJS 开发一个大规模的单页应用(SPA)

下载源代码 介绍 (SPA)这样一个名字里面蕴含着什么呢? 如果你是经典的Seinfeld电视秀的粉丝,那么你一定知道Donna Chang这个名字。Jerry跟Donna见面,Donna其实不是华人,但是却因在谈论其...

oschina
2014/08/18
49K
18

没有更多内容

加载失败,请刷新页面

加载更多

Perl - 获取文件项目

参考:http://www.runoob.com/perl/perl-directories.html 下面返回JSON格式的文件列表 #!/usr/bin/perluse strict;use warnings;use utf8;use feature ':5.26';require Fi......

wffger
昨天
1
0
vue组件系列3、查询下载

直接源码,虽然样式样式不好看,逻辑也不是最优,但是可以留作纪念。毕竟以后类似的功能只需要优化就可以了,不用每次都重头开始。。。 <template> <div class="pre_upload"> <div ...

轻轻的往前走
昨天
1
0
java浅复制和深复制

之前写了数组的复制,所以这里继续总结一下浅复制和深复制。 浅拷贝:对基本数据类型进行值传递,对引用数据类型进行引用传递般的拷贝。 深拷贝:对基本数据类型进行值传递,对引用数据类型,...

woshixin
昨天
1
0
kubernetes 二进制包安装

环境 角色 主机名 内网 IP 集群 IP 操作系统 服务 执行目录 部署机 k8s-master master120 10.0.4.120 - CentOS kube-apiserver kube-scheduler kube-controller-manager /opt/kubernetes/ et......

Colben
昨天
8
0
瑞达利欧的《原则》读后感作文2400字

瑞达利欧的《原则》读后感作文2400字: 拿到同事送的书读了几十页后,我意识到自己犯了一个错误:之前以为像《原则》这个书名,配上最成功的对冲基金经理、受用终身的教诲、傅盛引用并盛赞,...

原创小博客
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部