离子导航视图无法在Android上呈现-Java 学习之路

我是Angular的新手，我正在尝试制作一个简单的离子应用程序 .

我正在使用Ionic View应用程序（http://view.ionic.io/）在运行Android 4.4.4的Samsung Galaxy S3手机上运行该应用程序 .

我的申请很简单 . 它由一个带有类别按钮列表的屏幕组成，按下一个类别按钮可显示属于相应类别的子项列表 .

我的 index.html 只包含一个ion-nav-view元素，它应该从模板html文件加载html， soundCategories.tmpl.html . 但是，当应用程序在我的三星Galaxy S3设备上运行时，离子导航视图不会呈现，而是我得到我的后备文本（不支持离子导航视图） .

我的 index.html 如下：

<!doctype html>
<html ng-app="Eggly">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Eggly</title>
  <link rel="stylesheet" href="assets/css/normalize.css">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.2.4/css/ionic.min.css">    

  <link rel="stylesheet" href="assets/css/drexler.css">
  <link rel="stylesheet" href="assets/css/animations.css">
</head>
<body>
  <ion-nav-view name="soundCategories">ion-nav-view is not supported</ion-nav-view>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js">        </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-animate.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.0/angular-sanitize.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.2.4/js/ionic.min.js" charset="utf-8"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.2.4/js/ionic-angular.min.js" charset="utf-8"></script>

  <script src="app/eggly-app.js"></script>
  <script src="app/soundCategories/soundCategories.js"></script>
  <script src="app/soundCategories/soundbites/soundbites.js"></script>
  <script src="app/common/models/soundBites-model.js"></script>
  <script src="app/common/models/soundCategories-model.js"></script>
</body>
</html>

这是 eggly-app.js ，其中定义了我的主模块：

angular.module('Eggly', [
  'ionic',
  'soundCategories'
])
  .config(function ($stateProvider, $urlRouterProvider) {
      $stateProvider
        //abstract state serves as a PLACEHOLDER or NAMESPACE for application states
        .state('eggly', {
            url: '',
            abstract: true
        })
    ;

    $urlRouterProvider.otherwise('/');
})
.run(function ($ionicPlatform) {
    $ionicPlatform.ready(function () {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs).
        // The reason we default this to hidden is that native apps don't usually show an accessory bar, at
        // least on iOS. It's a dead giveaway that an app is using a Web View. However, it's sometimes
        // useful especially with forms, though we would prefer giving the user a little more room
        // to interact with the app.
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
            // Set the statusbar to use the default style, tweak this to
            // remove the status bar on iOS or change it to use white instead of dark colors.
            StatusBar.styleDefault();
        }
    });
});
;

这里是 soundCategories.js ，其中定义了ion-nav-view中引用的控制器：

angular.module('soundCategories', [
'eggly.models.soundCategories'
 ])
.config(function ($stateProvider) {
    $stateProvider
        .state('eggly.soundCategories', {
            url: '/',
            views: {
                //target the ui-view named 'soundCategories' in ROOT state (eggly)
                'soundCategories@': {
                    controller: 'SoundCategoriesListCtrl as soundCategoriesListCtrl',
                    templateUrl: 'app/soundCategories/soundCategories.tmpl.html'
                },
                //target the ui-view named 'soundbites' in ROOT state (eggly)
                //to show all soundbites for all soundCategories
                'soundbites@': {
                    controller: 'SoundbitesListCtrl as soundbitesListCtrl',
                    templateUrl: 'app/soundCategories/soundbites/soundbites.tmpl.html'
                }
            }
        })
    ;
})
.controller('SoundCategoriesListCtrl', function SoundCategoriesListCtrl($scope, SoundCategoriesModel) {
   (...)
 });
;

当我在浏览器或模拟器中运行应用程序时，我的soundCategories模板的内容 soundCategories.tmpl.html 将在屏幕上呈现 .

但是，当我在S3设备上运行应用程序时，模板不会呈现 .

我尝试通过Ionic View应用程序下载我的应用程序，并且还使用它构建它

ionic build android

并将生成的.apk手动移动到设备上 . 在这两种情况下，离子导航视图都不会呈现 .

我是跳过一步还是错过重要的包括？

PS . 有些人可能会注意到我的应用程序是基于Egghead.io的Eggly应用程序，所以它是 . 我使用Eggly应用程序作为基础 .

1 回答

0

我弄清楚为什么我的 <ion-nav-view> 元素没有渲染 .

我正在调用辅助函数来以错误的顺序定义模块 .

最初，当我在 eggly-app.js 中定义了我的主模块时，我调用 angular.module().config().run(); 并且 <ion-nav-view> 元素没有渲染 .

当我将订单切换到 angular.module().run().config(); 时， <ion-nav-view> 元素正确呈现 .

回复于 2024-05-05T21:40:59+08:00

离子导航视图无法在Android上呈现

1 回答

相关问题