我几天前才开始使用 ionic,遇到了一个问题。 我正在尝试做一个侧面菜单,其中的内容将链接到 Controller 中存在的数据,我设法做到了。但是我找不到解决方案的是,当您单击侧面菜单中的该元素时,它会显示有关使用 id 查找元素的元素的完整数据。 我真的不知道如何解释它,所以用一些代码可能会更清楚:
应用程序.js:
config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
//leaderboard special menu
.state('leader', {
url: '/leader',
abstract: true,
templateUrl: 'templates/leaderMenu.html',
controller: 'UserCtrl'
})
.state('leader.single', {
url: '/users/:leaderId',
views: {
'menuContent': {
templateUrl: 'templates/user.html',
controller: 'UserCtrl'
}
}
})
.state('leader.user', {
url: '/user',
templateUrl: 'templates/leader_user.html'
})
Controller .js :
.controller('UserCtrl', function ($scope) {
$scope.leaderboard = [
{ image: 'jean_kevin.jpg', name: 'Jean-caca', id: 1, star_number: 50 },
{ image: 'jean_kevin.jpg', name: 'Jean-kevin', id: 2, star_number: 42 },
{ image: 'jean_kevin.jpg', name: 'Jean-kevin', id: 3, star_number: 20 }
];})
leaderMenu.html :
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-energized">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-assertive">
<h1 class="title">LeaderBoard</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ng-repeat="user in leaderboard" menu-close href="#/leader/users/{{user.id}}">
<div class="item item-avatar">
<img src="/img/{{user.image}}" />
<h2>{{user.name}}</h2>
</div>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
和 user.html :
<link href="../css/my_account.css" rel="stylesheet">
<ion-view view-title="User">
<ion-content>
<div class="photoList">
<ion-list>
<ion-item ng-repeat="user in leaderboard">
<div class="item item-thumbnail-left" style="border:0px">
<img src="../img/{{user.image}}" />
<h2>{{user.name}}</h2>
<a href="#" class="subdued">{{user.star_number}} <i class="icon ion-star"></i></a>
</div>
</ion-item>
</ion-list>
</div>
</ion-content>
</ion-view>
我知道这不是在 user.html 中做的正确方法,但我不知道如何获取在该页面中选择的 ID。
谢谢你的帮助
最佳答案
您可以使用$stateParams
服务访问 Controller 中的路由参数。对于您的情况,您可以像这样访问 leaderId
$stateParams.leaderId
。不要忘记在 Controller 中包含 $stateParams
。还有一件事,通过查看您的代码,我会建议您使用不同的 Controller 。您对侧边菜单和其他页面使用相同的 UserCtrl
。
看这个Documentation to $stateParams .
关于javascript - ionic 的路由问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32521580/