CODEWITHSUNDEEP
angularjsangular-ui-router
Troy Carlson
Troy Carlson

Reputation: 3121

Angular UI-Router nested state template not rendered

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

Upvotes: 2

Views: 1170

Answers (1)

New Dev
New Dev

Reputation: 49590

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

Upvotes: 6

Related Questions