为什么我的离子模态不能在 android 4.4 设备上打开？

Question

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

`inic serve`

然而，在构建这个之后，要么

cordova build android 或 ionic build android

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

代码如下：

对于 html 视图：

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

控制器：

/// <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);
}

是的，我正在使用打字稿

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

应该没问题，因为它仍然具有所有这些层次结构（结果不是）。

所有脚本都变成了运行只是下

/assets/www

目录，所以如果你你的

../../settings/settings.html 变成 ./settings/settings.html

它会工作得很好。

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

为什么我的离子模态不能在 android 4.4 设备上打开？

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

android

webview

cordova

angular-ui

ionic-framework