Understand ion-nav-view and UI Router (with nested views)

I am trying to change the login page to my app so there is a template with a nested view inside it which updates as the user registers/logs in/forgets password.

I have the following: login-page.html (very simple for now while I wrap my head around it):




And my config is set up as follows:

    .state('login', {
        url        : "/login",
        templateUrl: "templates/login/login-page.html",
        abstract: true

    .state('login.register', {
        url        : "/register",
        templateUrl: "templates/login/register.html",
        controller: "RegisterController"


But that is showing a blank page with an empty header. I have no idea why? I cannot find much information on the abstract property either and whether I am using it right.

Any ideas?

So a good place to look is this example


So in the ion-side-menu content, we have a named ion-nav-view.
This is so Ui-router knows to render the contents of each view into that element.

Perfect. Thank you :slight_smile:

This works fine if state is ‘state’, or ‘state.child’, but if state is a deeply nested view, like ‘state.child.grandchild’ or further, ion-view doesn’t work anymore.

Replacing it by ui-view makes it work, but looses the animated transitions. Is this a bug, or it’s so by concept?

I’m building an app with a large data structure. My usage of deeply nested views is mainly due to scope inheritance problems and performance - it does feel more performant the less you manually ‘massage’ the scope.

Also, inheriting the scope ends certain problems like images not loading the first time the page is rendered (without needing a timeout),

1 Like

Nesting 3 or 4 layers down shouldn’t cause any issues. Can you replicate this in a codepen?

Made this plnkr, and couldn’t replicate the issue - you’re right, it is behaving like it should.

Have to triple check my app again… Many layered templates.
Thanks for your help pointing the right way.

1 Like