AngularJS Modal not showing up when templateUrl changes

Question

So far, what I have is straight off the Angular UI example:

Controller:

var ModalDemoCtrl = function ($scope, $modal) {

  $scope.open = function () {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl
    });
  };
};


var ModalInstanceCtrl = function ($scope, $modalInstance) {

  $scope.close = function () {
    $modalInstance.dismiss('cancel');
  };
};

And this section, which is just in sitting in the .html for the whole page this modal is on. Html:

<script type="text/ng-template" id="myModalContent.html">
  <div class="modal-header">
    <h3 class="modal-title">I'm a modal!</h3>
    <button class="btn btn-warning" ng-click="close()">X</button>
  </div>
  <div class="modal-body">
    Stuff
  </div>
</script>

This works just fine. But I'm trying to refactor some things out and organize my code, so I would like to move the modal html to its own file. When I do so, and try to use it as by changing the templateUrl to the path: \tmpl\myModalContent.html, it doesn't show up. The backdrop still appears and inspecting the page shows that it loaded correctly, but just won't show up.

I've tried changing the css for the modal per these suggestions with no difference.

My question is, why does this work fine if the script tag is in the main html, but not at all if it is in it's own file?

Here is a plnkr that shows what I mean. If you copy what is in the template.html and place it right above the button in the index.html file, it works...

javaCity · Accepted Answer · 2014-07-24 22:58:24Z

7

Remove template declaration for template.html and just put raw HTML in there like this:

<!--script type="text/ng-template" id="template.html"-->
            <div class="modal-body">
                 Hello
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" ng-click="cancel()">OK</button>
            </div>
<!--/script-->

Your plnkr worked fine with second click to the button. It'd show the modal as expected. The reason it showed up with second click is because Angular would load up the 'uncompiled' template the first time, then it compiled the template to raw HTML which is ready for your subsequent clicks.

EDIT: Also, when you put the template code right in index.html, Angular compiles the template during its initial pass through the DOM; that's why the modal seemed to work.

answered Jul 24, 2014 at 22:58

javaCity

4,3282 gold badges27 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Bobo Over a year ago

I think it may have to do with my versions of angular and bootstrap and such. checking now

Bobo Over a year ago

plnkr.co/edit/p9qsqgMVOvT4yDmI7C0j?p=preview I've included the same versions as everything in my project and the plnkr still works.. It hits a breakpoint at the $modal.open part, but never makes it into the ModalInstantCtrl

javaCity Over a year ago

Well if it works in plnkr and not in your environment, try downloading the working plunk to your machine and see if that works?

Bobo Over a year ago

Solved it myself (silly user error), but thank you for your help!

Bobo · Accepted Answer · 2014-07-28 15:45:54Z

7

Well I am clearly a dummy. All I had to do was include my new file in the main view.

<div ng-include="'path-to-file.html'"></div>

Then calling it from the controller was easy, all I needed was the id (modalContent.html) as the templateUrl.

Just keep swimming, and you'll eventually get there :)

answered Jul 28, 2014 at 15:45

Bobo

1,0172 gold badges12 silver badges26 bronze badges

1 Comment

Oliver Dixon Over a year ago

This should be automatic.

Collectives™ on Stack Overflow

AngularJS Modal not showing up when templateUrl changes

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related