AngularJS New Router - Multiple Viewports route parameter is not working

160 views Asked by At

My SPA uses the new angular router. Everything is working well, but now I would like to pass a parameter to one of the components. There are multiple viewports in every routing, and in this case I can't grab the parameter passed to the router.

The routing

AppController.$routeConfig = [
    {
        path: '/',
        redirectTo: '/home'
    },
    {
        path: '/home',
        components: {
            'main': 'home',
            'footer': 'footer'
        },
        as: 'home'
    },
    {
        path: '/request',
        components: {
            'main': 'request',
            'footer': 'footer'
        },
        as: 'request'
    },
    {
        path: '/request/:id',
        components: {
            'main': 'request',
            'footer': 'footer'
        },
        as: 'requestid'

    },
    {
        path: '/allItems',
        components: {
            'main': 'allItems',
            'footer': 'footer'
        }, as: 'allItems'
    }
];

The calling of the route

 <a class="btn btn-warning" aria-haspopup="true" aria-expanded="false" ng-link="requestid({id: 1})">

the result url seems legit

https://<sitename>/index.aspx#/request/1

The controller cannot get the $routeParams.id.

angular.module('app.request')
.controller('requestController', ['$routeParams', '$scope', function ($routeParams, $scope) {
    $scope.id = $routeParams.id;
}]);

What I've missed? Thanks in advance.

0

There are 0 answers