Question

我覆盖模板：

$templateCache.put("template/modal/window.html",
                "<div tabindex=\"-1\" class=\"modal fade {{ windowClass }}\" ng-class=\"{in: animate}\" ng-style=\"{'z-index': 1050 + index*10, display: 'block'}\">\n" +
                "    <div class=\"modal-dialog\" ng-style=\"formSize\"><div class=\"modal-content\" ng-style=\"formSize\" ng-transclude></div></div>\n" +
                "</div>");

我添加的唯一内容是对话框中的2 ng样式和内容内容（我删除了将忽略我们不需要/不想要的对话框的点击）

$ modal.open调用获得解析

resolve: {
 formSize: function() {
  return {width:'680px',height:'520px'}
                        }
}

模态对话框的控制器得到：

controller("DialogInstanceCtrl", function ($scope, $modalInstance,formSize) {
    $scope.formSize =formSize;

并将其分配到其范围。

这不起作用，因为模态模板得到了另一个范围（modalWindow指令创建的范围）

所以我只是用同一个名字制作自己的指令：

.directive('modalWindow', ['$modalStack', '$timeout', function ($modalStack, $timeout) {
    return {
        restrict: 'EA',
        link: function (scope, element, attrs) {
        }
      };
}]

但是该范围现在与控制器范围完全相同。我不能添加范围：{}或范围：true到该指令，因为然后angular抱怨约2个指令要求相同的范围

问题是我想扩展默认的boostrap-ui modalWindow指令。所以我真的想要相同的隔离范围，以便我可以添加东西。

我得到它的唯一方法是这样做：

.directive('modalWindow', ['$modalStack', '$timeout', function ($modalStack, $timeout) {
    return {
        restrict: 'EA',
        link: function (scope, element, attrs) {
          scope.$$childHead.formSize = scope.formSize; 
        }
      };
}]

还有其他方法吗？我不能使用windowClass css样式。因为大小是完全动态的，所以来自服务器的数据可以控制。

Answer 1

解决方法是在显示模态之前在DOM中添加传入服务器样式：

$('html head').append('<style id="myUniqueStyleId">.uniqueModalClass { /* dialog styles */ }</style>');

这可以类似于：

    if ($("myStyleId").length) {
        $modal.open({windowClass: "uniqueModalClass"});
    } else {
        $http.get("/styles/styleId").then(function (data) {
            $('html head').append('<style id="' + data.data.styleId + '">' + data.data.style + '</style>');
            $modal.open({windowClass: "uniqueModalClass"});
        })
    }

Answer 2

我找到的最佳解决方法是为每个.modal-dialog设置不同的父类例如

/* MODALS */
.parent .modal-dialog{
    width:80%;
}
.parentbig .modal-dialog{
    width:50%;
}
.parent3 .modal-dialog{
    width:80%;
}

然后将windowClass参数设置为您需要的父级。然后，您可以动态选择对话框并使用jQuery等设置其大小。

$(".parent2 .modal-dialog").css("width","20%")

Answer 3

为了使用windowClass，你可以做这样的事情

modalInstance = $modal.open({
    templateUrl : 'templates/loadingdialog.html',
    backdrop : 'static',
    windowClass : 'loading-spinner-modal'
});

Answer 4

 $scope.showViewPhotoDialog = function (albumIndex, photoIndex) {
                var modalInstance = $modal.open({
                    templateUrl: 'views/page.html',
                    controller: "PageCtrl",
                    size: 'lg'
});

尺寸：'lg'或'sm'

Angular-ui模态窗口，如何通过样式设置模态对话框的大小（css类windowClass不能使用）

4 个答案: