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:
This can be done similar to: