我正在使用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>
答案 0 :(得分:0)
尝试使用父状态作为抽象,
这是一个plnkr
示例check it out
答案 1 :(得分:0)
好吧,在通过消除尝试最有用的调试方法之后,我发现问题就是我构建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'
}
});