Angular UI-Router nested state template not rendered

Question

I'm new to ui-router and can't get layout.directory.teams or layout.directory.people to load their respective templates. I expect those templates to be loaded in the ui-viewon the layout state's template.

/dashboard works fine...the dashboard.html template is loaded in the ui-view in content.html template.

/directory/teams doesn't load the teams.html template.

/directory/people doesn't load the people.html template.

.state('layout', {
    abstract: true,
    templateUrl: "components/common/content.html"
})
.state('layout.dashboard', {
    url: "/dashboard",
    controller: 'DashboardCtrl',
    controllerAs: 'dashboard',
    templateUrl: "app/features/dashboard/views/dashboard.html",
})
.state('layout.directory', {
    abstract: true,
    url: "/directory"
})
.state('layout.directory.teams', {
    url: "/teams",
    controller: 'DirectoryCtrl',
    controllerAs: 'directory',
    templateUrl: "app/features/directory/views/teams.html",
})
.state('layout.directory.people', {
    url: "/people",
    controller: 'DirectoryCtrl',
    controllerAs: 'directory',
    templateUrl: "app/features/directory/views/people.html",
})

Add template: "<div ui-view></div>" to layout.directory state. A child state renders in the template of its parent... so, the parent must have ui-view — New Dev
– New Dev, Commented Oct 17, 2015 at 22:15
Well that was easy enough...it worked :) If you add that as an answer I can accept it. Is that because the child states need to inject their template into their direct parent's ui-view instead of the top level ui-view (in my case, layout)? — Troy Carlson
– Troy Carlson, Commented Oct 17, 2015 at 22:19

New Dev · Accepted Answer · 2015-10-17 22:22:23Z

6

A child state renders its template in the template of its parent where ui-view directive is, even if the parent is abstract.

So, in your case, add ui-view to the template of layout.directory state:

.state('layout.directory', {
    abstract: true,
    url: "/directory",
    template: "<div ui-view></div>"
})

answered Oct 17, 2015 at 22:22

New Dev

49.8k12 gold badges99 silver badges140 bronze badges

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

Collectives™ on Stack Overflow

Angular UI-Router nested state template not rendered

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related