Question

我是ui-router的新用户，无法layout.directory.teams或layout.directory.people加载各自的模板。我希望这些模板可以加载到ui-view州模板上的layout。

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

/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指令，即使父级是abstract。

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

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

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

1 个答案: