javascript - ionic 的路由问题

Question

我几天前才开始使用 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。

谢谢你的帮助

Answer 1

您可以使用$stateParams 服务访问 Controller 中的路由参数。对于您的情况，您可以像这样访问 leaderId $stateParams.leaderId。不要忘记在 Controller 中包含 $stateParams。还有一件事，通过查看您的代码，我会建议您使用不同的 Controller 。您对侧边菜单和其他页面使用相同的 UserCtrl。
看这个Documentation to $stateParams .