Bug: Modal iOS and Web

ionic-v1
1

Hi guys,

I have a problem with the modal view.
I am doing it like it is shown in http://ionicframework.com/docs/api/service/$ionicModal/.

The problem is, that the modal does not apear on the browser and on the ios i get an error that the template was not found.

What can i do ?

My Controller:

'use strict';
angular.module('myapp.controllers')

.controller('ModalController', function($scope, $ionicModal) {

  $ionicModal.fromTemplateUrl('../templates/modal.content.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal;
  });
  $scope.openModal = function() {
    $scope.modal.show();
  };
  $scope.closeModal = function() {
    $scope.modal.hide();
  };
  //Cleanup the modal when we're done with it!
  $scope.$on('$destroy', function() {
    $scope.modal.remove();
  });
  // Execute action on hide modal
  $scope.$on('modal.hide', function() {
    // Execute action
  });
  // Execute action on remove modal
  $scope.$on('modal.removed', function() {
    // Execute action
  });

});

My modal Template looks like that:

<script id="modal.content.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>
2

Take a look at our codepen demo, see if you can find any issues with your code compared to ours.

3

Yeah, this version works on iphone but, how can i extract the code inside the script tag in a own html file ?

4

Just copy the markup with the script tag, and update the link in you js to the right location.

5

I tried that but as soon as I build and run it on the iPhone, it dose not work.

There is always the following error message:
Error: ‘undefined’ is not an object (evaluating ‘a.modal.show’)

On iPhone this one:
Failed to load resource: The requested URL was not found on this server.
file:///var/mobile/Applications/A4BECCFB-E0FD-4F62-8082-AA540E07D24E/myApp.app/templates/overlays/modal.template.html

The path is wrong because the template is inside www/…

6

Any idea why it is so ?

7

I just updated to the nightly builds and I’m not getting that error.

http://embed.plnkr.co/zmyZbGe71p1logQhrpfr/preview

The errors are most likely due to an error in your javascript. Can you put together a codepen or plunker?

8

It happens at the following app repo:

https://github.com/lsadiki/IonicKitchenSink

Could you try to fix it and do a pull request ?
It is not extracted at this version but you could try to do it.

Thank you very much.

9

Not getting the error.

10

I was just having a similar problem where my modal was fine in browser via ionic serve, but was unresponsive after running ionic build and running my app on hardware.

Basically, watch your paths. My modal html was being referenced as ‘/templates/modal.content.html’ when it should have been ‘templates/modal.content.html’ (depending on your directory structure) since the root on web isn’t the root on iOS or Android

11

For me it’s working on IOS emulator and browser but working on IONIC APP. Does it work for Ionic App for anyone? If its does please help me out.