javascript - 每次调用 subview 时都会实例化父 Controller

Question

我正在使用 ui-router，并且我有一个配置，其中我使用具有 Controller 的父 View 和也有自己的 Controller 的 subview 。 每次我导航到 subview 之一时，父 Controller 都会再次实例化，因此会对服务器执行不必要的请求。 我希望能够在子状态之间导航并重用父 Controller 解析的变量。

如何防止每次都实例化父 Controller ？

这是我的路由配置:

$stateProvider
    .state('researchLayoutEditor', {
        url: '/research/:researchId/layoutEditor/:orderInGroup',
        controller: 'layoutEditorController',
        controllerAs: 'layoutEditorCtrl',
        templateUrl: 'app/researchManagement/researchLayoutEditor/layoutEditor.html',
        redirectTo: 'researchLayoutEditor.slide',
        params: {
            group: 'A',
            orderInGroup: '0'
        },
        resolve: {
            researchLayout: function (researchesService, $stateParams) {
                return researchesService.getResearchLayout($stateParams.researchId, false);
            },
            research: function (researchesService, $stateParams) {
                return researchesService.getResearch($stateParams.researchId);
            }
        }
    }).state('researchLayoutEditor.slide', {
        url: '/textual',
        templateUrl: 'app/researchManagement/researchLayoutEditor/textSlide.html',
        controller: 'textSlideController',
        controllerAs: 'txtSlide'
    }).state('researchLayoutEditor.movie', {
        url: '/video',
        templateUrl: 'app/researchManagement/researchLayoutEditor/movieSlide.html',
        controller: 'movieSlideController',
        controllerAs: 'movieSlide',
        resolve: {
            movieCategories: function (utilsService) {
                return utilsService.getVideoCategories();
            }
        }
    }).state('researchLayoutEditor.memory', {
        url: '/memory',
        templateUrl: 'app/researchManagement/researchLayoutEditor/memorySlide.html',
        controller: 'memorySlideController',
        controllerAs: 'memorySlide'
    }).state('researchLayoutEditor.question', {
        url: '/question',
        templateUrl: 'app/researchManagement/researchLayoutEditor/questionSlide.html',
        controller: 'questionSlideController',
        controllerAs: 'questionSlide'
    });

这是 HTML:

<div id="mainContent">
    <!-- our nested state views will be injected here -->
    <div ui-view class="inner-content"></div>
</div>

Answer 1

尝试使用父状态作为抽象， 这是一个 plnkr 示例 check it out