问每次调用子视图时实例化父控制器。
EN

Stack Overflow用户

提问于 2015-12-23 08:09:51

回答 2查看 177关注 0票数 3

我正在使用ui-路由器，我有一个配置，其中我使用的父视图，它有一个控制器和子视图，其中也有自己的控制器。每次我导航到一个子视图时，都会再次实例化父控制器，从而对服务器执行不必要的请求。我希望能够在子状态之间导航，并重用父控制器解析的变量。

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

这是我的路由配置：

$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>

javascript

angularjs

angular-ui-router

nested-views

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-01-05 07:25:08

在尝试了最有用的排除调试方法之后，我发现了一个问题，那就是我构建URL的方式。在我的父状态中，我的URL定义如下：

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

当orderInGroup参数在每次单击子状态时发生变化时。最后的URL如下所示，例如：

./#/research/37/版面编辑/1/录象

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

./#/research/37/版面编辑/视频/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'
                }
            });