android - 为什么我的 ionic 模式不能在 android 4.4 设备上打开？

Question

我在 android 设备上使用 ionic 框架(当然还有 cordova)。有一个我正在使用的模式用于设置和东西，它在桌面浏览器上打开得很好

`inic serve`

但是，在构建这个之后，要么用

cordova 构建 android 或 ionic 构建 android

它不会再打开，不仅在真实的android设备中，而且在桌面浏览器中也是如此。

代码如下:

对于 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>

对于 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);
}

是的，我正在使用 typescript

Answer 1

@GuillemVicens 好吧，事实证明 ionic 框架启动器为您提供了一个不错的起点，但对 cordova 不够友好。在 ionic 项目中，我将我的 settings.html 放在

下

/www/settings/settings.html

和 settings.ctrl.ts

/www/scripts/settings/settings.ctrl.ts

所以我用

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

尝试指定模式的模板。然而在 Cordova ，它打包了所有的

www

进入

Assets /www

witch 应该没问题，因为它仍然拥有所有这些层次结构(事实证明不是)。

所有的脚本都只是在

下运行

/assets/www

目录，所以如果你切换你的

../../settings/settings.html 到 ./settings/settings.html

它会工作得很好。

对于没有太多时间的人来说，脚本在浏览器中运行在它自己的目录下，但在 android 中，它运行在 /www/ 目录下，所以确保你使用相对寻址权。