Angular UI-Router, Parent ui-view renders but child view with templates do not

Issue

If I have index.html with:

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

Then inside that home view i render frame.html with the following inside:

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

In my app.js I’ve been trying to get the most inner the ui-view inside frame.html to render another html template. I’m able to render the content in the home view just fine but nothing renders inside home_content.

My app.js ui-router code

    $stateProvider
        .state('user', {
            abstract: true,
            template: '<ui-view/>',
            data: {
                access: AccessLevels.user
            }
        })

        .state('user.home', {
            url: '/home',
            views: {
                'home@': {
                    templateUrl: 'app/partials/home/frame.html',
                    controller: 'homeCtrl'
                },
                'home_content@home': {
                    templateUrl: 'app/partials/home/dashboard/index.html',
                    controller: 'dashboardCtrl'
                }
            }
        });

Seems like I may be coming at this all wrong, not sure if the above is the right way to go about it.

Solution

There is a working plunker

I would expect, that you want to target unnamed view of your parent in the child, so the view should be defined like this:

$stateProvider
    // here we define parent
    .state('user', {
        abstract: true,
        // parent has UNNAMED view
        template: '<ui-view/>', // this will be injected into index.html
        ...                     // ui-view=""
    })
    // child will partilly target parent
    // and also itself
    .state('user.home', {
        url: '/home',
        views: {
            // here we target parent UNNAMED view
            '': {
                ...
            },
            // here we target current state
            // so we should use state name
            'home_content@user.home': {
                ...
            }
        }
    });

What would also work is instead of '' : { } we can use '@home' : {} (see the doc below).

In case (as mentioned below in the comment) we have index.html with target named home:

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

We can use this plunker, which redefines the parent abstract state like this:

$stateProvider
    .state('user', {
        abstract: true,
        data: {
            ...
        },
        views : {
          'home' : {
            template: '<div ui-view=""></div>',
          }
        }
    })

Check the doc

View Names – Relative vs. Absolute Names

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state’s absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

For example, the previous example could also be written as:

.state('report',{
    views: {
      'filters@': { },
      'tabledata@': { },
      'graph@': { }
    }
})

Answered By – Radim Köhler

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply

Your email address will not be published.