[ Routing issue on ionic ]

I just started using ionic a few days ago, and I came into an issue. I am trying to do a side menu where the content would be linked to data present into a controller, and I managed to do it. But what I can't find a solution to, is when you click into that element in the side menu, it shows the full data about the element using the id to find it. I don't really know how to explain it, so it might be more clear with some code :

app.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>

and 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>

I know it's not the right way to do in user.html, but I have no idea how to get the id that was selected in that page.

Thanks for your help

Answer 1

You can acces route parameters in controller by using $stateParams service. For your case you can access leaderId like this $stateParams.leaderId. Dont forget to include $stateParams in your controller. One more thing, by seeing your code, i will suggest you to use different controllers. You are using same UserCtrl for sidemenu and other page.
See this Documentation to $stateParams.