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

2019独角兽企业重金招聘Python工程师标准>>>

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>

转载于:https://my.oschina.net/u/1992917/blog/791317