ionicModal not working on iOS/android - nightly build

ionic-v1
1

Hello,

I have an ionic modal dialog for creation of items. It works great in the browser but not on iOS and Android (both emulator and real device). It never calls the callback it seems. So the $scope.modal never gets assigned and hence the below exception in Android log. I am pointed to the nightly build(v1.0.0-beta.1-nightly-1717). Quick search didn’t find similar issue.

Is this a known issue? Any pointers appreciated.

Exception:

: [INFO:CONSOLE(2)] "TypeError: Cannot call method 'show' of undefined

Code:

$ionicModal.fromTemplateUrl('/templates/items/additem.html', {
        scope: $scope,
        animation: 'slide-in-up'
    }).then(function($ionicModal) {
        console.log('Setting ionicmodal:'+ $ionicModal);
        $scope.modal = $ionicModal;
    });

-ix

2

Weird, I just tried both on android and ios devices and was able to get it working. I incorporated you code into the ionic modal sample from code

Is there any way you could put together a codepen more fit to your situation?

3

Added some debug statements in the ionic-angular and found that a 404 was getting returned for path “/template/items/additem.html”. Once I changed to ‘templates/items/additem.html’, it started working.

I am not sure what the error handling is supposed to be here.

Here is what my debug code added for handling the error scenario.
~line#2167 - ionic-angular.js

function fetchTemplate(url) {
    console.log('Getting Template' + url);
    return $http.get(url, {cache: $templateCache})
    .then(function(response) {
            console.log('Got Template' + url);
            return response.data && response.data.trim();
    },function(err) {
            console.log('Got Error: ' + JSON.stringify(err)); 
    });
4

Thanks Mike. The issue was with the path - started with ‘/’ - once I removed it - it worked.

But I would think the error handling for fetching templates needs to be added, right?

-ix

5

Or, I could handle it in my call - so yeah - no action needed - everything is working fine. Thanks for the response!

-ix

6

Same here … worked flawlessly on the devices once the beginning slash was removed. It works ok in the browser emulator, which was throwing me off. - Thanks!

7

Can anyone shed some light into why when I use a modal it takes over the entire screen? I copied and pasted the codepen example in this thread and the modal in my project is still taking over the entire screen.

8

The modal will resize using css media queries. So on smaller screens, it will take up the whole view port, like it does on mobile phones. If the device’s width is over 600px, it will only be about 60% of the screen size.

9

I have the same issue. It works fine in the browser also in every device width, but not in the ios emulator nor the ios device.

10

Hi, try to use relative url for modal template. For me issue was in absolute url
/build/html/shared/modals/beforeExitModal.tpl.html
I’ve changed it to
build/html/shared/modals/beforeExitModal.tpl.html
And it works fine