How to load modal window from templates?

tutorials
1

Hi ionicorns,

As given in here, I used the similar approach where I kept my-modal.html script within index.html. Now I would like to keep it within my template folder.

www
  |___ index.html
  |___  templates
            |____ my-modal.html

So I tried to open it like

.controller('MyController', function($scope, $ionicModal) {
  $ionicModal.fromTemplateUrl('templates/my-modal.html', {
   .......

But it is not working. Any suggestion to load the my-modal.html from a separate file?

2

Is it possible to post us the content of my-modal.html?

3

its same as in the above link

<script id="my-modal.html" type="text/ng-template">
  <div class="modal">
    <ion-header-bar>
      <h1 class="title">My Modal title</h1>
    </ion-header-bar>
    <ion-content>
      Hello!
    </ion-content>
  </div>
</script>
4

In whatever controller you have for index.html, put in:

$ionicModal.fromTemplateUrl('templates/my-modal.html', function(modal) {
    $scope.modal = modal;
  }, {
    animation: 'slide-in-up',
    focusFirstInput: true
  });

Then in index.html, you’d have something like:

 <button class="button button-icon ion-information" ng-click="modal.show()">
        </button>

Edit: Oops that wasn’t meant to be in reply to you bengtler

5

Thats what I already have. I am using the exact controller that I have used in index.html. It is not working for me.

Thanks

6

Are you remembering to add the ng-click=“modal.show()”? Because that’s exactly what I have and it works for me.

7

Actaully I am opening the modal using $timeout as in this post. The exact question is how to separate modal window from the index.html and have it as separate html file?

Thanks for valuable time :smile:

8

Hey, try it without the script-tag around your modal.

The script tag is necessary if you load the modal in your view DOM directly to initially hide the modal and set an id to have access in the $ionicModal service.

9

@bengtler Ya I tried that way too. Please have a look at Modal via including template? here I have added fiddles to play with it and let me know your suggestions.

Thank you,
Praveen