CODEWITHSUNDEEP
javascriptangularjsparent-childangular-ui-router
gugiserman
gugiserman

Reputation: 25

Angular UI Router: state transition parent-child

.state('add', {
    parent: 'home',
    url:    'add/',
    views:  {
        'pop':  {
            templateUrl:    '/views/nav.html'
        }
    },
});

Transition from parent state 'home' to 'home.add' won't load template '/views/nav.html' into target view ('pop').

Everything else works just fine. The problem seems to be exclusive with child states.

I already tried like this:

.state('home.add', {
    url:    'add/',
    views:  {
        'pop':  {
            templateUrl:    '/views/nav.html'
        }
    },
});

Doesn't work as well. (I changed ui-sref="add" to ui-sref="home.add" in this case).

Both examples change the URL to the state URL, but doesn't seem to transition between states nor renders any views from the new state (if it has a parent).

Thank you.

@citizenslave fixed my problem, thanks!

.state('add', {
    parent: 'home',
    url:    'add/',
    views:  {
        'pop@':  {
            templateUrl:    '/views/nav.html'
        }
    },
});

Upvotes: 1

Views: 1146

Answers (1)

citizenslave
citizenslave

Reputation: 1418

Your template from the home state needs to have a ui-view='pop' to insert child state templates into. If not, and you're using the home state's 'pop' view, you have to address it in the appropriate state. You can reference it absolutely with 'pop@home'. UI-Router Wiki

Upvotes: 1

Related Questions