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
我还没有看到关于这个事实的任何文件。我可能错过了它,但如果它更明显就更好了。我希望这个答案能让其他人省去几个小时的挠头...
首先:我完全是 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
我还没有看到关于这个事实的任何文件。我可能错过了它,但如果它更明显就更好了。我希望这个答案能让其他人省去几个小时的挠头...