每次调用子视图时，父控制器都会被实例化。

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>

- Jecky Bershteyn

---

可能想要查看此问题的被接受答案：https://dev59.com/OmEh5IYBdhLWcg3wKgug - Shaun Scovil

我的问题与之相反，我想防止父控制器的重新加载。最奇怪的事情是，第一个子状态（.slide）在初次访问页面时不会重新加载父控制器... - Jecky Bershteyn

你能在 http://plnkr.co 上重现这个问题吗？ - Shaun Scovil

我会尝试并给您更新。 - Jecky Bershteyn

Answer 1

好的，在尝试了最有帮助的排错方法之后，我通过排除法找到了问题所在，那就是我构建URL的方式。 在我的父状态中，我定义了以下URL：

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

当每次点击子状态时，orderInGroup参数会发生变化。因此，最终的URL看起来像这样：

.../#/research/37/layoutEditor/1/video

显然，将"orderInGroup"参数的位置更改并将其放置在URL的末尾：

.../#/research/37/layoutEditor/video/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'
                }
            });

- Jecky Bershteyn

Answer 2

尝试将父状态设为抽象状态， 这里有一个 plnkr 示例 点击查看

- Basilin Joe