angularjs - 未呈现 Angular UI-Router 嵌套状态模板

Question

我是 ui-router 的新手，无法让 layout.directory.teams 或 layout.directory.people 加载它们各自的模板。我希望这些模板在 layout 状态模板的 ui-view 中加载。

/dashboard 工作正常...dashboard.html 模板加载到 content.html 的 ui-view 中 模板。

/directory/teams 不加载 teams.html 模板。

/directory/people 不加载 people.html 模板。

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

Answer 1

即使父状态是抽象，子状态也会在 ui-view 指令所在的父状态模板中呈现其模板。

因此，在您的情况下，将 ui-view 添加到 layout.directory 状态的模板中:

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