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时，您可以立即调用projectUserCtrl视图中显示的users@project。我假设我已经附加到嵌套视图的每个控制器也是如此。

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

我该怎么做？

Answer 1

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

我不确定材料设计细节，但实质上你的标签只是链接ui-sref链接。

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

1 个答案: