Nested Views in AngularJS not working

Question

I have the following routing set up for my application:

$stateProvider
    .state('mac', { // domain.com/mac
        url: "/mac",
        views: {
            'body': {
                templateUrl: 'partials/products/mac.body.html'
            },
            'content': {
                templateUrl: 'partials/products/mac.home.html'
            }
        }
    })
    .state('mac.design', { // domain.com/mac/design
        url: "/design",
        views: {
            'body': {
                templateUrl: 'partials/products/mac.body.html'
            },
            'content': {
                templateUrl: 'partials/products/mac.design.html'
            }
        }
    })
    .state('mac.features', { // domain.com/mac/features
        url: "/features",
        views: {
            'body': {
                templateUrl: 'partials/products/mac.body.html'
            },
            'content': {
                templateUrl: 'partials/products/mac.features.html'
            }
        }
    })
    .state('iphone', { // domain.com/iphone
        url: "/iphone",
        views: {
            'body': {
                templateUrl: 'partials/products/iphone.body.html'
            },
            'content': {
                templateUrl: 'partials/products/iphone.home.html'
            }
        }
    })
    ...

The index.html looks like:

<div ui-view="body"></div>

And then inside mac.body.html:

<div ng-include="'partials/header.html'"></div>

<div class="view-container">
    <div ui-view="content" class="view-frame"></div>
</div>

And then finally inside mac.home.html:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <h1>Mac</h1>

        </div>
    </div>
</div>

The body view loads in fine with the header include, but the content doesn't... Any ideas why?

The content file should be findable but I think I've ruled that out as the issue as if I replace the templateUrl with template: 'test content' that also does not appear... so it seems like it can't see the actual ui-view="content"

Another way to look at this:

.state('home', {
            url: "/",
            views: {
                'layoutFile': {
                    templateUrl: 'partials/layoutDefault.html'
                },
                'contentFile': {
                    templateUrl: 'partials/home/index.html'
                }
            }
        })

So basically I can choose which views show what. But it's how to get that contentFile view to be seen by the state when it's nested inside another like so...

ms87 · Accepted Answer · 2014-09-19 14:55:44Z

2

Your state definitions say that you will have a home state with the body and content views, however from what you describe you define the content view as a child of the body view, not your home state. Basically you're saying with your state deceleration that you will do this:

index.html for the home state:

<div ui-view="body"></div> 
<div ui-view="content"></div>

However what you're actually doing is:

<div ui-view="body">
  <div ui-view="content"></div> 
</div>

Meaning that you have made the content view a child of body and not a sub view if your main state.

See this plunk.

edited Sep 19, 2014 at 14:55

answered Sep 19, 2014 at 10:00

ms87

17.5k23 gold badges89 silver badges123 bronze badges

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

10 Comments

Cameron Over a year ago

So what's the solution to do your second block of code? As it's the same state, so I wouldn't create a nested state like 'home.content' or would I? Because the user can't access it.

ms87 Over a year ago

I'm not sure what your scenario is.....Maybe move the content view outside of the body view so that it's not a child of the body view? You can make child sates of body and content. And the user can access those, your could make the home state abstract and make your landing page a state that is a child of home.

Cameron Over a year ago

Take a look at my amended question. Basically I want to load in a different body template for each MAIN section (e.g. Mac, iPhone) and then a different content template for each sub area.

ms87 Over a year ago

If you have the body and content views in one state, such as mac, and then have a child state like mac.design also declare body and content views, you do realise that mac.design will show body and content views for both states right?

Cameron Over a year ago

Yes that's fine that's the idea. Otherwise I would have to use lots of partials and includes, but by trying to do it this way I can use a different global container for each product (in this example) and then a different content file for each state. I can then use includes for simpler stuff like headers and footers and menus etc. If that all makes sense?

|

Cameron · Accepted Answer · 2014-09-19 14:23:58Z

This is what I have managed to get working:

$stateProvider
    .state('home', {
        abstract: true,
        url: "/",
        views: {
            'body': {
                templateUrl: 'partials/home/home.body.html'
            }
        }       
    })
    .state('home.index', {
        url: "",
        views: {
            'content': {
                templateUrl: 'partials/home/home.content.html'
            }
        }
    })

So basically I set up a home base state and then a bunch of child states that will inherit from that that top level state... makes sense when used in practice and means you can then have multiple views in each ACTUAL state as well as the inheritance.

IMPORTANT: Something to note is that you can't link to the state home anymore as it's abstracted, so the best to way to do this without having to link to home.index is the following:

$stateProvider
    .state('base', {
        abstract: true,
        url: "/",
        views: {
            'body': {
                templateUrl: 'partials/home/home.body.html'
            }
        }       
    })
    .state('home', {
        parent: 'base',
        url: "",
        views: {
            'content': {
                templateUrl: 'partials/home/home.content.html'
            }
        }
    })

So this means that you can use home as your state but it will use base as the parent.

Collectives™ on Stack Overflow

Nested Views in AngularJS not working

2 Answers 2

10 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related