Angular UI Bootstrap modal - use custom modal window

Question

As given in the link http://angular-ui.github.io/bootstrap ( select modal from Directive drop down on top), there is a parameter called windowTemplateUrl which is used to over

Answer 1

windowTemplateUrl is a template for window decoration: https://github.com/angular-ui/bootstrap/blob/master/template/modal/window.html

You still need to supply modal's content (using template or templateUrl) that you would like to see decorated.

Answer 2

First, you should use either base tag in you html documents or do not use relative urls.

Angular does not know about virtual directories so when path to you site looks like mysite.com/MySite there is a chance of getting into troubles.

pkozlowski.opensource has already given you an answer. Be also aware that you can provide an id of template instead of real url if you'd like to. In that case template must be declared like this:

<script type="text/ng-template" id="TemplateId">
    ...template...
</script>

Answer 3

This is how windowTemplateUrl is working

$scope.open = function () {

var modalInstance = $modal.open({
  templateUrl:'myModalContent.html',
  windowTemplateUrl: 'customModal.html',
  controller: 'ModalInstanceCtrl',
  resolve: {
  params: function(){
     return {
        title: 'Custom title 2'
           };
         }
      }
   });
};

Original version of angular-ui (not working)

Modificated version of angular-ui (working)