每次調用子視圖時，父控制器都會實例化

Question

我正在使用ui-router，我有一個配置，其中我使用的父視圖有一個控制器和子視圖，它也有自己的控制器。 每次導航到其中一個子視圖時，父控制器都會再次實例化，因此會對服務器執行不必要的請求。 我希望能夠在子狀態之間導航並重用由父控制器解析的變量。

如何防止每次實例化父控制器？

這是我的路由配置：

$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示例檢查出來

Answer 2

好吧，在通過消除嘗試最有用的調試方法之后，我發現問題就是我構建URL的方式。 在我的父狀態中，我有如下定義的URL：

url: '/research/:researchId/layoutEditor/:orderInGroup',

當orderInGroup參數在每次單擊子狀態時更改。 所以最終的URL看起來像這樣：

... /＃/科研/ 37 / layoutEditor / 1 /視頻

顯然，在更改“orderInGroup”參數的位置並將其放到URL的末尾之后

... /＃/科研/ 37 / layoutEditor /視頻/ 1

並移動

                params: {
                    group: 'A',
                    orderInGroup: '0'
                }

同樣反對孩子的狀態，問題得到了解決。 所以最終工作的URL配置看起來像這樣（我將/：orderInGroup移動到子狀態）：

$stateProvider
            .state('researchLayoutEditor', {
                url: '/research/:researchId/layoutEditor',
                controller: 'layoutEditorController',
                controllerAs: 'layoutEditorCtrl',
                templateUrl: 'app/researchManagement/researchLayoutEditor/layoutEditor.html',
                redirectTo: 'researchLayoutEditor.slide'
            })
            .state('researchLayoutEditor.movie', {
                url: '/video/:orderInGroup',
                templateUrl: 'app/researchManagement/researchLayoutEditor/movieSlide.html',
                controller: 'movieSlideController',
                controllerAs: 'movieSlide',
                params: {
                    group: 'A',
                    orderInGroup: '0'
                }
            })
            .state('researchLayoutEditor.slide', {
                url: '/textual/:orderInGroup',
                templateUrl: 'app/researchManagement/researchLayoutEditor/textSlide.html',
                controller: 'textSlideController',
                controllerAs: 'txtSlide',
                params: {
                    group: 'A',
                    orderInGroup: '0'
                }
            });