CODEWITHSUNDEEP
angularjsangular-uibootstrap-modalangular-ui-modal
kipris
kipris

Reputation: 3039

Angular Modal: add template from another html

I have a modal template in another html file but after the page was loaded first time modal window opens without a content, second time it's all ok. How can this be fixed?

Here's the plunker http://plnkr.co/edit/lw056nAaU7BfqIVZSddb?p=preview

//Open modal on main page with:
<div ng-controller="ModalDemoCtrl">
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
<button type="button" class="btn btn-default" ng-click="open('lg')">Large modal</button>
<button type="button" class="btn btn-default" ng-click="open('sm')">Small modal</button>
<button type="button" class="btn btn-default" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>

Upvotes: 5

Views: 4450

Answers (2)

Pierre Maoui
Pierre Maoui

Reputation: 6384

You should not wrap your template with <script type="text/ng-template" id="myModalContent.html"></script>.

Ui-modal expects direct HTML here.

If you need to use ng-template, you should insert the ng-template script tag in your index.html (or anywhere else but it should be loaded in your page) and open your modal with template instead of templateUrl this way :

var modalInstance = $uibModal.open({
      animation: $scope.animationsEnabled,
      template: "<div ng-include src=\"'myModalContent.html'\"></div>",
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
});

Upvotes: 5

nada
nada

Reputation: 972

Maybe you can use $templateCache in this case instead to load the template from another file. I don't know why you have this issue but this solved the problem for me.

Maybe you are not looking for something like that, since this increase the JS file size and sometimes this template will never be used.

angular.module('ui.bootstrap.demo').run(['$templateCache', function ($templateCache) {

    $templateCache.put('myModalContent.html',
        'Hello World'
    );

}]);

What do you think?

EDIT: @Pierre Maoui answer seems more adequate for me based on the question.

Upvotes: 0

Related Questions