AngularJS ui router problems with substate routing

Question

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?

lzagkaretos · Accepted Answer · 2018-06-08 09:46:38Z

2

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 Jun 8, 2018 at 9:46

lzagkaretos

2,9202 gold badges19 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amala Paulson · Accepted Answer · 2018-06-08 10:39:16Z

The issue is that you are not declaring a ui-view in the parent template.

When the application is in a particular state—when a state is "active"—all of its ancestor states are implicitly active as well.

Child states will load their templates into their parent's ui-view.

enter code here

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

}

Collectives™ on Stack Overflow

AngularJS ui router problems with substate routing

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related