CODEWITHSUNDEEP
angularjsangular-ui-router
brazorf
brazorf

Reputation: 1951

AngularJS ui router problems with substate routing

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?

Upvotes: 0

Views: 91

Answers (2)

Amala Paulson
Amala Paulson

Reputation: 1

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'
});

}

Upvotes: 0

lzagkaretos
lzagkaretos

Reputation: 2910

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>`,

Upvotes: 2

Related Questions