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
@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.