Modal via including template?

In the modal example it mentions that instead of using inline, you can include a template.

My current “bad” code for a modal is very WET if i want the same modal available throughout my app

<script id="seemingly-arbitrary-name.html" type=text/ng-template">
your html content here copy/pasted for each view you want the modal on currently

I’d prefer to include it via my-modal-template.html so that i can just call it on any view without having to repeat the code; but i can’t figure it out and the example failed to provide an example.

1 Like

You can specify a template URL like so:

  $ionicModal.fromTemplateUrl('views/modals/new-exercise.html', function(modal) {
    $scope.newExerciseModal = modal;
  }, {
    scope: $scope,
    animation: 'slide-in-up'

@dave beat me to it.

Here’s an example :

Here’s another :

So the code examples look identical to what I have (except for $scope.newExerciseModal) which doesn’t seem to have any change.

As soon as I remove the <script id="modal.html" type="text/ng-template"> from the view, it doesn’t work. I have a separate page called “modal.html” that contains what would have been inside the <script> tags

.controller('modal', function($scope, $ionicModal) {
  // Load the modal from the given template URL
  $ionicModal.fromTemplateUrl('modal.html', function(modal) {  $scope.modal = modal; }, 
    // Use our scope for the scope of the modal to keep it simple
    scope: $scope,
    // The animation we want to use for the modal entrance
    animation: 'slide-in-up'
  $scope.openModal = function() {
  $scope.closeModal = function() {

My NON-working view (trying to use external template modal.html):

<div data-ng-controller="modal" data-ng-click="openModal()">click</div>

Working View:

<script id="modal.html" type="text/ng-template">
modal content here
<div data-ng-controller="modal" data-ng-click="openModal()">click</div>

Where the working view will require me to copy/paste the code for each view I want to have the modal (if i needed to edit a spelling error, id have to edit multiple instances)

As best I can understand, you have a view file with the modal template inside it.

If so, you need to put the <script id="modal.html" type="text/ng-template"> template in it’s own file. You can put in your index.html file. Then, any controller that needs that modal can reference it.

If that doesn’t do the trick, can you make a Codepen sample so we can see what’s wrong?

inside my index.html I would like to store my templates elsewhere.
I’m currently getting an error when I load my template outside

I need load my $ionicModal.fromTemplateUrl(‘views/modals/new-exercise.html’) outside the index.html file but I get an error. Any examples of this thx.

To load a modal dialog from a file using:

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

you must ensure that the very first line of the file is a div element, i.e.

<div class="modal">

If the first line is a comment the modal will not load. This applies to ionic 0.9.26.

@guyz Have you found the opt solution? Please let me know your approach.


@Calendee I too have a similar question here. As per your example I have added my-modal.html script within Index.html and it is working fine #fiddle1 :smile:

Now I am trying to keep it within an template my-modal.html like I mentioned in my question and here the my-modal.html not working #fiddle2 :frowning:

As per the error in console, I can understand that I missing to point the $scope and therefore it is not working. But I am unable to fix it up. Please let me know your suggestions.


The problem simply seems to be with timing. I changed the timeout on the second example to 100ms and it worked fine. I imagine it has to do with the quality of the connection to the Plunker servers. I don’t know why the first loads so well. I can’t see any difference in the code at all.

Keep in mind that on a device, the entire HTML will be packaged and served locally; so, I don’t think you will have this problem.

i was having also problems, tried with javascript line and other stuff with no avail, mine ended working like this:

in controller:

$ionicModal.fromTemplateUrl('/nivi/www/templates/partials/produinfodialog.html', {
      scope: $scope, 
      animation: 'slide-in-up'
 }).then(function(modal) { $scope.modal = modal;;});

in view:

<div class="modal">
  <ion-header-bar class="bar bar-header bar-positive">
    <h1 class="title">Informacion del Producto</h1>
    <div class="button button-clear" ng-click="modal.hide()"><span class="icon ion-close"></span></div>
  <ion-content has-header="true" has-subheader="false" scroll="true">
    <p>This is a modal</p>
        <ul class="list" id="color_to_pick_list">
            <li ng-repeat="combination in combinations" class="item">
                        <a title="{{combination.color_name}}" style="background:{{combination.color_hex}}" class="color_pick selected" 
name="{{combination.color_name}}" id="color_7" href="#">aca</a>
     <input type="hidden" value="7" name="group_3" class="color_pick_hidden">

Ok…I also encountered this issue. This comes because we are just including the template to a DIV which is supposed to be the only way and DIV are by default shown. So just hide it. OR use ng-hide class.

<div ng-include="'templates/new-task.html' " class="ng-hide"></div>
use this. It will hide the div.

Has there been any update to this? I am having the same problem as @praveen. Loading a modal from an external template is not working at all. It is doable if I include the modal code inside a script tag inside the .html file. Also FYI, I am doing this in an integrated meteor-ionic-angular app, but I don’t think that should change anything as every other ionic component is working correctly.

@Calendee Can you please comment on this?

Can I please get some help on this? I posted about this 18 days ago and still haven’t received a single reply. @Calendee can you please advice?

Modals from template URLs ($ionicModal.fromTemplateUrl) (rather than inline) work pretty well across the board. So, I don’t know exactly what problem you’re having. I frequently have a completely separate “myModal.html” file in my app - rather than inline scripts.

Do you have a Codepen or Ionic Playground sample that demonstrates the problem? Or can you post the modal code here and the call to $ionicModal?

I realized what the problem was because my code was organized in a file structure with meteor. I had to create a separate /modals directory to save my custom modals. I describe my problem and solution here: