CODEWITHSUNDEEP
angularjsangular-ui-router
Dayan
Dayan

Reputation: 8031

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

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.

Upvotes: 7

Views: 6842

Answers (3)

Shashank Agrawal
Shashank Agrawal

Reputation: 25817

You are making your state configuration complex. Just change your code to look like this:

$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' : {
            templateUrl : 'app/partials/home/dashboard/index.html',
            controller : 'dashboardCtrl'
        }
    }
});

You are actually not using @ properly and which is optional. This should work unless you have your correct view path.

Upvotes: 0

Pankaj Parkar
Pankaj Parkar

Reputation: 136194

Looks like your child .state has wrong code it should be 'home@home_content' instead of 'home_content@home'

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

Upvotes: 0

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123901

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
            '[email protected]': {
                ...
            }
        }
    });

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@': { }
    }
})

Upvotes: 2

Related Questions