Angular ui-路由器：如何加载子控制器而不是父控制器？

Question

我的 Angular 应用程序中有以下嵌套路由：

.state('mapping', {
    url: '/mapping',
    templateUrl: 'app/components/mapping/mapping.html',
    controller: 'MapCtrl as map',
    abstract: true,
    authenticate: true
})
.state('mapping.all', {
    url: '',
    templateUrl: 'app/components/mapping/partials/all.html',
    authenticate: true
})
.state('mapping.project', {
    url: '/:projectName',
    controller: 'ProjectCtrl as proj',
    templateUrl: 'app/components/mapping/partials/project.html',
    authenticate: true
})

访问 'mapping.project' 时，ProjectCtrl 永远不会加载。相反，MapCtrl 加载时就好像我仍在父状态一样。

如何使用特定于该子状态的另一个控制器覆盖父控制器？

我希望每次访问该特定子状态时都加载此控制器，如果我对每个子状态都有一个父控制器，则不会发生这种情况。

Answer 1

任何 controller 都与 view 相关（与 state 无关）。这意味着，如果：

...When accessing mapping.project, ProjectCtrl never gets loaded....

该视图未加载。这主要意味着 parent view (app/components/mapping/mapping.html) 不包含目标：

<div ui-view=""></div>

因此，如果我们将目标 (ui-view="") 放入父模板，子状态会将其视图注入该位置。但这不会取代父控制器。会

当访问父级（或直接子级）时调用父级 ctrl
如果从父项访问子项，则不会重新初始化父项 ctrl，但会启动子项 ctrl

检查这些以获取更多详细信息：

Angular UI Router - Nested States with multiple layouts
How to disable data inheritance of angular ui router states

Angular ui-路由器：如何加载子控制器而不是父控制器？

Angular ui-router: How to load child controller instead of parent controller?

javascript

state

angularjs

angular-ui-router