Clive DM Clive DM - 1 month ago 5
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
or
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:

<ion-modal-view>
<ion-header-bar>
<h1 class="title">Settings</h1>
<div class="buttons">
<button class="button button-clear" ng-click="hideModal()">Done</button>
</div>
</ion-header-bar>
<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>
<ion-item class="item-input">
<label class="input-label">Port Number</label>
<input type="text" ng-model="vm.portNum" name="portNum" required />
</ion-item>
<a class="button button-block button-positive" ng-click="vm.startCommand()"
ng-disabled="settingsForm.ipAddr.$invalid || settingsForm.portNum.$invalid && !vm.isListening">{{vm.btnString}}</a>
</form>
<br />
<ion-list>
<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>
</ion-list>
</ion-content>
</ion-modal-view>


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.model.show();
}

_scope.hideModal = () => {
_scope.model.hide();
}
}

angular.module('app')
.controller('SettingsCtrl', SettingsCtrl);
}


yes, i'm using typescript

Answer

@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

/www/settings/settings.html

and settings.ctrl.ts

/www/scripts/settings/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

www

into the

assets/www

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

All the scripts turns to run just under the

/assets/www

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.