ion-nav-view 无法在 Android 上呈现答案

【问题标题】：ion-nav-view not rendering on Androidion-nav-view 无法在 Android 上呈现
【发布时间】：2016-02-22 21:14:07
【问题描述】：

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

我正在使用 Ionic View 应用程序 (http://view.ionic.io/) 在运行 Android 4.4.4 的三星 Galaxy S3 手机上运行该应用程序。

我的应用程序相当简单。它由一个带有类别按钮列表的屏幕组成，按下类别按钮会显示属于相应类别的子项目列表。

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

我的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 移动到设备。在这两种情况下，ion-nav-view 都不会渲染。

我是跳过了一个步骤还是错过了一个重要的包含？

附言。有些人可能会注意到我的应用程序是基于 Egghead.io 的 Eggly 应用程序，事实就是如此。我使用 Eggly 应用程序作为基础。

【问题讨论】：

标签： angularjs ionic-framework

【解决方案1】：

我知道为什么我的 <ion-nav-view> 元素没有呈现。

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

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

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

【讨论】：