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 ride the modal content. So, in case we are using this, what to give in templateUrl or template, as one of these is required for calling the open function of modal. For e.g. the code is given below.

$scope.open = function(){
  var modalInstance = $modal.open({
      windowTemplateUrl : '/client/content.html'
  })
}

If I run the code as above, it gives error that templateUrl or template is required. So, how do I use windowTemplateUrl.

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

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)

Answer 3

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>