Angular-UI模态窗口，如何通过样式设置模态对话框的大小（无法使用CSS类windowClass）

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) {
        }
      };
}]

但是，该范围现在与控制器范围完全相同。 我无法为该指令添加范围：{}或范围：正确，因为随后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”