Modal not showing on device or emulator (but showing/hiding in browser)

ajbraus · June 2, 2014, 1:10am

My modal is working in the browser but not emulator or device:

controller.js

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

template.html

<button class="button button-small clear" ng-click="modal.show()">
   <i class="icon ion-gear-a"></i>
</button>

I also tried using ng-click="showModal()" with no success.

I’m on beta 6

mhartington · June 3, 2014, 2:31am

Hmm, I took the codepen example and was able to get things working on the ios simulator

ajbraus · June 3, 2014, 2:05pm

I tried making mine look more like yours but there are two differences between mine and yours.

Mine passes scope to the modal.
Mine does not use a separate controller for the modal. (I need this to be the case to access local variables in my google map initiated in the original controller).

Are those requirements?
###update
I think it is just my button because I put in

<button class="button button-small clear" ng-click="showModal()">
  <i class="icon ion-gear-a"></i>
</button>

 $scope.showModal = function() {
   console.log("Showing Modal")
   $scope.modal.show()
 }

and no dice

I tried a more vanilla button and still no dice

<div class='item'><button ng-click="showModal()">blah</button></div>

###update

Not the button. The problem is in the $IonicModal block.

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

when this runs the console.log does not fire on device or emulator. Working in browser.

mhartington · June 3, 2014, 3:41pm

It shouldn’t, it’s working on my end. Maybe an error someone where in your controller or some css clashes?

Can you throw together a codepen with an exact use case?

ronyrun · June 3, 2014, 3:49pm

Hi, I’m having trouble with passing scope to the modal. Is it possible to have a codepen ?
Thank you very much.

ajbraus · June 3, 2014, 4:24pm

I am loading an external template too

$ionicModal.fromTemplateUrl('/www/templates/trip-filter-modal.html', function (modal) {

is that ok?

Here is codepen I think of what I have. Except loading the external template.

ajbraus · June 3, 2014, 4:33pm

$scope.showModal = function() {
  console.log("blah")
  console.log($scope.modal)
  $scope.modal.show()
}

in the device console this yields:

blah

in the browser it yields

blah
child {focusFirstInput: true, unfocusOnHide: true, focusFirstDelay: 600, backdropClickToClose: true, scope: ChildScope…}

mhartington · June 3, 2014, 6:37pm

Change your path to templates/templates/trip-filter-modal.html

ajbraus · June 3, 2014, 7:21pm

No dice. And that way it doesn’t work on the browser either …

I got it to work though.

You can’t use an external template. You have to put the template into the same template as the parent Controller. Then it works

$ionicModal.fromTemplateUrl('trip-filter-modal.html', function (modal) {

<script id="trip-filter-modal.html" type="text/ng-template">
  <div class="modal">
    <ion-header-bar class="bar bar-header bar-positive">

dberg · August 22, 2014, 5:18am

For what its worth, i had a typo in the external path (had a leading slash) as well and changing it to

‘templates/xxx/file.html’ worked for me. Double check your path.

Shadowsyntax · March 2, 2015, 4:18pm

@ajbraus It can work from an external template just remove the leading slash like @dberg mentioned. It’s always best to remove the leading slash when trying to define a path in ionic. It works on browser but it will give you issues when you build to the device.

Cheers!

han4wluc · June 7, 2015, 5:15am

this did not work for me on device
"/templates/registrationModal.html"

this worked for me on device
"templates/registrationModal.html"

Taehwa · November 13, 2015, 11:46pm

You saved my Friday !!

dcCoin · January 8, 2016, 4:51am

it looks like i am having a similar issue…i can only get Modals to work on my device(android 4.1.1) It only works if i run with --livereload mode. I thought it might be some conflict so I have made a test app that only has a single button, header, page and 1 modal no css. I dont get any errors. Dont know what i might be doing wrong. is 4.1.1 not supported? i used some of the tab-template to make things faster to test

<ion-view view-title="Dashboard"> <ion-content class="has-subheader"> <button class="button button-positive" ng-click="openModal()"> </button> </ion-content> </ion-view>

app.js
.config(function ($stateProvider, $urlRouterProvider) { $stateProvider .state('dash', { url: '/dash', templateUrl: 'templates/tab-dash.html', controller: 'ListController' }); $urlRouterProvider.otherwise('/dash'); });

controller.js
.controller(‘ListController1’, function ($scope, $state, $ionicModal ) {

$ionicModal.fromTemplateUrl(’…/templates/myPage.html’, {
scope: $scope,
animation: ‘slide-in-up’
}).then(function (modal) {
$scope.modal = modal;
})

$scope.openModal = function () {
$scope.modal.show();
};

thanks for the help…sorry if dumb question

dcCoin · January 8, 2016, 5:47am

so I dont know if this is already an know thing but i figured it out (probably known to everyone but me =(… to use the modal like this you must add “/www/” infront of where the file is on your computer. in my case the modal code should be “$ionicModal.fromTemplateUrl(’…/www/templates/myPage.html’, {”

not just “$ionicModal.fromTemplateUrl(’…/templates/myPage.html’, {”

this means that if you change it by adding the “/www/” it will NOT work during testing in the browser just change it to test on a device or emulator something happens to the file directory when it is packaged up…like i said i bet everyone knows this but just in case there you go

lcapanelli · January 13, 2016, 12:06am

You can use an external template with your modal code and it is not a path problem. Just remove the <html> and <script> tags from the external template file, keeping the modal code inside the <ion-modal-view> </ion-modal-view>.

Example:
Inside your Controller:

$ionicModal.fromTemplateUrl('templates/modal.html', {
   scope: $scope, ...

Inside your modal.html file:

<ion-modal-view>
… your modal code here…
</ion-modal-view>

kevinvavelin · May 8, 2016, 12:31am

I up this topic because I have a similiar issue.

I have a bunch of controller, the modal is shown perfectly on browser and on device but only for the first modal. If I try to call a modal inside a new controller in a pushed view, my modal cannot load on device (but it works on browser and ionic lab).

Can anyone help me with this issue ? the only fix I found was to put script inside the html code but I don’t like this approach

Here is my index html which have my side menu :

<body ng-app="TrainCommander">
<ion-side-menus ng-controller="MenuCtrl as Menu">
  
  <ion-pane ion-side-menu-content="">
    <ion-nav-bar class="bar-tc nav-title-slide-ios7">
      <ion-nav-back-button>Retour</ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>
  </ion-pane>

  <ion-side-menu side="left">
    <ion-header-bar class="bar bar-header bar-tc menu-header padding">Bienvenue, msavares !</ion-header-bar>
    <ion-content has-header="true" id="content-menu">
      <ion-list>
      	<ion-item class="menu-item" ng-click="openProfile()" menu-close="">
      		<i class="ion-person"></i> Profil
      	</ion-item>
        <ion-item class="menu-item" ng-click="openAbout()" menu-close="">
        	<i class="ion-ios-information"></i> A Propos
        </ion-item>
        <ion-item class="menu-item" ng-click="openContact()" menu-close="">
        	<i class="ion-email"></i> Contact
        </ion-item>
        <ion-item class="menu-item logout" ng-click="" menu-close="">
        	<i class="ion-power"></i> <strong>Se d&#xE9;connecter</strong>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
  
</ion-side-menus> 
</body>

Here is my menu.js which have my modal and which can be open as normal :

angular.module("TrainCommander.Menu", [])
.controller("MenuCtrl", function($ionicModal, $scope, $state) {

// ABOUT

$ionicModal.fromTemplateUrl("modules/About/about.html", {
    scope: $scope,
    //controller: "AboutCtrl",
    animation: "slide-in-up"
}).then(function(modal) {
   $scope.aboutModal = modal;
});

$scope.openAbout = function() {
   $scope.aboutModal.show();
}; 

$scope.closeAbout = function() {
   $scope.aboutModal.hide();
};

// CONTACT 

$ionicModal.fromTemplateUrl("modules/Contact/contact.html", {
    scope: $scope,
    animation: "slide-in-up",
    controller: "ContactCtrl"
}).then(function(modal) {
    $scope.contactModal = modal;
});

$scope.openContact = function() {
	$scope.contactModal.show();  
};

$scope.closeContact = function() {
   $scope.contactModal.hide();
};

$scope.$on("modal.shown", function() {
   var map;
	var myLatLng = {lat: 43.6958795, lng: 7.2516615};
    
    map = new google.maps.Map(document.getElementById('map'), {
        lat: myLatLng,
        zoom: 8
    }); 
});

// PROFIL

$ionicModal.fromTemplateUrl("modules/Profile/profile.html", {
    scope: $scope,
    controller: "ProfileCtrl",
    animation: "slide-in-up"
}).then(function(modal) {
    $scope.profileModal = modal;
});

$scope.openProfile = function() {
	$scope.profileModal.show();  
};

$scope.closeProfile = function() {
   $scope.profileModal.hide();
};

});

` And here is the same example in another view which is pushed via ion-nav-view, and it’s impossible to get it called on device

angular.module('TrainCommander.SearchResults', [])
.controller('SearchResultsCtrl', function($scope,$ionicModal, $state) {
	
$ionicModal.fromTemplateUrl("modules/TrainRoute/trainRoute.html", {
    scope: $scope,
    //controller: "AboutCtrl",
    animation: "slide-in-up"
}).then(function(modal) {
   $scope.routeModal = modal;
});

$scope.openRoute = function() {
   $scope.routeModal.show();
}; 

$scope.closeRoute = function() {
   $scope.routeModal.hide();
};
});

Thanks in advance for your answer

salomonraj · June 4, 2016, 12:43pm

this worked for me on device
"templates/registrationModal.html"

in device and emulator /templates is not working. you have to give “templates/registrationModal.html”

Allensmilko · March 12, 2017, 10:56pm

Hey so cool thanks!!!

Rupinderthind · May 3, 2017, 6:34am

Thank you #han4wluc, u just saved my day.

Topic		Replies	Views
Bug: Modal iOS and Web ionic-v1	10	4334	May 3, 2016
Modal not showing - why?	5	1781	July 4, 2014
Modal hide doesn't work properly... it shows again ionic-v1	6	3821	March 14, 2014
Ionic2 Modal won't show ionic-v3	1	1035	October 19, 2016
Two modal two controller ionic-v1	0	666	May 14, 2016

Modal not showing on device or emulator (but showing/hiding in browser)

Related topics