Question

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

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

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

我的index.html只包含一个ion-nav-view元素，该元素应该从模板html文件soundCategories.tmpl.html加载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手动移动到设备上。在这两种情况下，离子导航视图都不会渲染。

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

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

Answer 1

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

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

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

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

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

1 个答案: