Javascript – Angular-ui modal window, how to set the size the modal dialog through a style (css class windowClass can’t be used)

angular-uiangular-ui-bootstrapangularjsjavascriptmodal-dialog

i override the template:

$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>");

the only thing i add is the 2 ng-style on the dialog and the content stuff (and i have removed the click that will dismiss the dialog that is something we don't need/want)

the $modal.open call gets a resolve

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

the controller of the modal dialog gets that:

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

and assigns it to its scope.

This doesn't work ofcourse because the modal template gets its stuff rom another scope (the one that the modalWindow directive creates)

so i just make my own directive with the same name:

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

But that scope is now exactly the same scope as the controller one.
i can't add scope: {} or scope: true to that directive because then angular complains about 2 directives asking for the same scope

Problem is that i kind of want to extend the default boostrap-ui modalWindow directive.. So i really want that same isolated scope so that i can add stuff.

the only way i got it working was doing this:

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

Is there any other way?
I can't use the windowClass css style. Because the size is completely dynamic an controlled from data coming from a server.

Best Answer

A workaround would be to add the incoming server styles in the DOM before displaying the modal:

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

This can be done similar to:

    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"});
        })
    }
Related Topic