Clive DM Clive DM - 1 year ago 66
Android Question

Why isn't my ionic modal opening on an android 4.4 device?

I am using ionic framework with a android device (with cordova, of course). There's a modal I'm using for settings and stuff, it opens well on desktop browser with

`inic serve`

However, after build this, either with

cordova build android
ionic build android

it won't open again, not only is it in an real android device, but also in the desktop browser.

Here's the code:

for the html view:

<h1 class="title">Settings</h1>
<div class="buttons">
<button class="button button-clear" ng-click="hideModal()">Done</button>
<ion-content class="padding">
<form name="settingsForm" novalidate>
<ion-item class="item-input">
<label class="input-label">IP Address</label>
<input type="text" ng-model="vm.ipAddress" name="ipAddr" required />
<ion-item class="item-input">
<label class="input-label">Port Number</label>
<input type="text" ng-model="vm.portNum" name="portNum" required />
<a class="button button-block button-positive" ng-click="vm.startCommand()"
ng-disabled="settingsForm.ipAddr.$invalid || settingsForm.portNum.$invalid && !vm.isListening">{{vm.btnString}}</a>
<br />
<ion-item class="item-divider">Messages from socket ws://{{vm.ipAddress}}:{{vm.portNum}} -></ion-item>
<ion-item class="item-text-wrap" ng-repeat="msg in vm.msgs">{{msg}}</ion-item>

for the controller:

/// <reference path="../_reference.ts" />

module app.settings {
interface IModelScope extends angular.IScope {
model: Ionic.IModal;

showModal(): void;
hideModal(): void;

interface ISettingsCtrl {
ipAddress: string;
portNum: number;
msgs: string[];
btnString: string;

startCommand(): void;

class SettingsCtrl implements ISettingsCtrl {
ipAddress: string;
portNum: number;
msgs: string[] = [];
btnString: string = 'Start';
private _gotDirective: boolean;

private _isListening: boolean = false;

static $inject = ['$scope', 'SocketSvc', '$ionicPopup', '$ionicModal', '$ionicLoading'];
constructor(private _scope: IModelScope,
private _socketSvc: app.service.ISocketSvc,
private _ionicPopup: Ionic.IPopup,
private _ionicModel: Ionic.IModal,
private _ionicLoading: Ionic.ILoading) {
_ionicModel.fromTemplateUrl('../../settings/settings.html', {
scope: _scope,
animation: 'slide-in-up'
}).then(m => {
_scope.model = m;

_scope.showModal = () => {;

_scope.hideModal = () => {

.controller('SettingsCtrl', SettingsCtrl);

yes, i'm using typescript

Answer Source

@GuillemVicens well, it turns out the ionic framework starter gives you a nice place to start but not cordova-friendly enough. In the ionic project, I put my settings.html under the


and settings.ctrl.ts


So I use the

_ionicModel.fromTemplateUrl('../../settings/settings.html', {
    scope: _scope,
    animation: 'slide-in-up'

to try to specify the modal's template. However in cordova, it package all the


into the


witch should be fine because it still got all this hierarchy (which turns out not).

All the scripts turns to run just under the


directory, so if you switch your

../../settings/settings.html into ./settings/settings.html

it'll work just fine.

For who don't have much time, the scripts run in browser just under it's own directory, but in android, it run under the /www/ directory, so make sure you use the relative addressing right.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download