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
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

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

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>"
})

Angular UI-Router nested state template not rendered

1 Answers