AngularJS ui router problems with substate routing

Issue

Really no idea what’s happening here, i’ve done this thing milions of times before.

The following configuration causes the root state to be executed even when the route is matching with the substate.

module.config(['$stateProvider', function($stateProvider) {
    $stateProvider.state('apps-neo',{
        url: '/apps/neo/',
        template: '<a ui-sref="apps-neo.a({id: 1})">test</a>',
        controller: function(){
            console.log('parent controller')
        },
        navbar: 'apps'
    }).state('apps-neo.a',{
        url: 'a/:id',
        template: 'a',
        controller: function($stateParams){
            console.log($stateParams.id)
        },
        navbar: 'apps'
    });
}

Case 1 GET /apps/neo/

I get the parent state activated, which is correct. Console logs parent controller and view shows the test link.

Case 2 GET /apps/neo/a/1

I still get the parent state activated, which is weird. Console logs parent controller and view shows the test link.


If i change to the following, basically removing states hierarchy, everything works as expected.

module.config(['$stateProvider', function($stateProvider) {
    $stateProvider.state('apps-neo',{
        url: '/apps/neo/',
        template: '<a ui-sref="apps-neo.a({id: 1})">test</a>',
        controller: function(){
            console.log('parent controller')
        },
        navbar: 'apps'
    }).state('apps-neo-a',{ // <------ do not make this state nest from previous
        url: '/apps/neo/a/:id',
        template: 'a',
        controller: function($stateParams){
            console.log($stateParams.id)
        },
        navbar: 'apps'
    });
}

Case 1 GET /apps/neo/

I get the apps-neo state activated, which is correct. Console logs parent controller.

Case 2 GET /apps/neo/a/1

I get the apps-neo-a state activated, which is correct. Console logs 1 and the view shows a.


Any idea?

Solution

You should add another ui-view in your parent state, in order for nested states to render.

For instance:

template: `<a ui-sref="apps-neo.a({id: 1})">test</a>
           <hr/>
           <div ui-view></div>`,

Answered By – lzagkaretos

Answer Checked By – Mary Flores (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.