Angular ui.router: 仅在子视图处于活动状态时加载控制器

Question

在我的 Angular 应用程序中，我有以下使用嵌套视图的示例路由定义：

.state('mapping.project', {
    authenticate: true,
    url: '/:projectId/:projectName',
    controller: 'ProjectCtrl as proj',
    views: {
        '': {
            templateUrl: 'app/components/mapping/partials/project.html',
            controller: 'ProjectCtrl as proj'
        },
        'details@project': {
            templateUrl: 'app/components/mapping/partials/details.html'
        },
        'activityTypes@project': {
            templateUrl: 'app/components/mapping/partials/activity-types.html'
        },
        'boundaryPartners@project': {
            templateUrl: 'app/components/mapping/partials/boundary-partners.html'
        },
        'progressMarkers@project': {
            templateUrl: 'app/components/mapping/partials/progress-markers.html'
        },
        'users@project': {
            templateUrl: 'app/components/mapping/partials/users/users.html',
            controller: 'projectUserCtrl as vm'
        }
    }
})

这些视图中的每一个都在一个选项卡中加载，使用 Angular Material md-tabs：https://material.angularjs.org/latest/api/directive/mdTabs

问题是，当我访问路由 mapping.project 时，您可以在我的 users@project 视图中看到的 projectUserCtrl 立即被调用。我假设我附加到嵌套视图的每个单独控制器也是如此。

我只想在选项卡处于活动状态并且加载特定模板时调用这些嵌套控制器（在本例中：users@project）。

我该怎么做？

Answer 1

您不需要所有这些子视图，您只需要 1 个，即可见选项卡的容器。为每个选项卡创建单独的状态，然后在单击 "tabs" 时相应地路由子视图。

我不确定 material 设计细节，但实际上您的选项卡只是链接 ui-sref 链接。

Angular ui.router: 仅在子视图处于活动状态时加载控制器

Angular ui.router: loading controller only when child view is active

angularjs

angular-ui-router

angular-material