Ionic View 的菜单导航问题

Menu navigation trouble with Ionic View

首先:我完全是 Ionic 的菜鸟。我正在用它构建我的第一个应用程序作为我公司的 POC。我在 iPhone 上使用 Ionic View 来查看它在移动设备上的外观。

我 运行 遇到的问题是,在我的 phone 上,当我进入菜单的一级时,应用程序似乎不想进一步导航。然而,在浏览器中(在我的开发环境中),它运行良好。知道我错过了什么吗?

我遇到问题的视图如下所示:

<ion-view view-title="About Us">
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="aboutus in aboutuspage" href="{{aboutus.url}}" >
        {{aboutus.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

我们在哪里

.controller('AboutUsCtrl', function($scope) {
  $scope.aboutuspage = [
    { title: 'What is NYDA?', url: '#/app/aboutus/whatisnyda' },
    { title: 'NYDA Board', url: '#/app/aboutus/nydaboard' },
    { title: 'NYDA Executive Managers', url: '#/app/aboutus/nydaexecutivemanagers' },
    { title: 'NYDA Strategy', url: '#/app/aboutus/nydastrategy' },
    { title: 'Youth Employment Accord', url: '#/app/aboutus/youthemploymentaccord' }
  ];
})

我在菜单的根目录中选择了“关于我们”视图。然后我得到 aboutuspage 数组描述的视图列表。

我在 app.js 中指定的路线如下:

.state('app.aboutus', {
    url: "/aboutus",
    views: {
      'menuContent': {
        templateUrl: "templates/aboutus.html",
        controller: 'AboutUsCtrl'
      }
    }
  })    

  .state('app.aboutus_whatisnyda', {
    url: "/aboutus/whatisnyda",
    views: {
      'menuContent': {
        templateUrl: "templates/aboutus/whatisnyda.html",
          controller: 'AboutUsCtrl'
      }
    }
  })

  .state('app.aboutus_nydaboard', {
    url: "/aboutus/nydaboard",
    views: {
      'menuContent': {
        templateUrl: "templates/aboutus/nydaboard.html",
          controller: 'AboutUsCtrl'
      }
    }
  })

  .state('app.aboutus_nydaexecutivemanagers', {
    url: "/aboutus/nydaexecutivemanagers",
    views: {
      'menuContent': {
        templateUrl: "templates/aboutus/nydaexecutivemanagers.html",
          controller: 'AboutUsCtrl'
      }
    }
  })

  .state('app.aboutus_youthemploymentaccord', {
    url: "/aboutus/youthemploymentaccord",
    views: {
      'menuContent': {
        templateUrl: "templates/aboutus/youthemploymentaccord.html",
          controller: 'AboutUsCtrl'
      }
    }
  })

  .state('app.aboutus_nydastrategy', {
    url: "/aboutus/nydastrategy",
    views: {
      'menuContent': {
        templateUrl: "templates/aboutus/nydastrategy.html",
          controller: 'AboutUsCtrl'
      }
    }
  })  

最后,我的(简化的)文件夹结构如下所示:

+-- project
+---- www
+------ templates
+-------- aboutus.html
+-------- AboutUs
+---------- NYDABoard.html
+---------- NYDAExecutiveManagers.html
+---------- NYDAStrategy.html
+---------- WhatISNYDA.html
+---------- YouthEmploymentAccord.html

目前这些观点中的每一个都是纯文本内容。我的菜单根目录中还有 2 个其他视图(它们没有更多视图分支),它们也是纯文本 - 我可以很好地导航到它们。

事实证明 Ionic 对区分大小写有点挑剔。根据我的配置,我应该将我的 AboutUs 文件夹中的文件命名为所有小型大写字母,如下所示

+-- project
+---- www
+------ templates
+-------- aboutus.html
+-------- aboutus
+---------- nydaboard.html
+---------- nydaexecutivemanagers.html
+---------- nydastrategy.html
+---------- whatisnyda.html
+---------- youthemploymentcccord.html

我还没有看到关于这个事实的任何文件。我可能错过了它,但如果它更明显就更好了。我希望这个答案能让其他人省去几个小时的挠头...