即使 `$stateparams` 改变,控制器也只初始化一次 [英] controller only initialized once even if `$stateparams` changed
问题描述
我最近开始使用 Ionic Framework(因此也使用 Angular.js),但我遇到了 Angular UI 的问题路由器:当它的 $stateParams
之一改变时,我注册的状态之一不会重新初始化.起初我认为它发生是因为状态是抽象的并且有孩子,所以它永远不会直接激活 - 但即使我将它更改为非抽象和最深"状态之一(即在看到状态时的叶子)树结构),问题依然存在.奇怪的是,它似乎不会发生在其他州.
I've recently started working with the Ionic Framework (and therefore with Angular.js as well) and I ran into a problem with the Angular UI Router: One of the states I registered is not re-initialized when one of its $stateParams
changes. At first I thought it happens because the state is abstract and has children, so it is never activated directly - but even when I changed it to be non-abstract and one of the "deepest" states (i.e. a leaf when seeing the states within a tree structure), the problem persists. The weird thing is that it seems not to happen on other states.
我尝试了不同的方法并仔细阅读了文档,但我找不到问题的原因.
I have tried different approaches and read the documentation carefully, but I could not find the cause for the issue.
以下是我用来注册状态的代码.状态 app.festival
是我遇到的问题:
The following is the code I use to register the states. The state app.festival
is the one I'm having the issue with:
- 当我第一次链接到
app.festival.overview
状态时,例如使用 URL/festival/33/overview
,状态的控制器也是因为app.festival
的抽象父控制器已正确初始化 - 但是,当我回到其他地方,然后链接到诸如
/festival/21/overview
之类的东西时,只有这个状态的控制器被重新初始化,而不是它的抽象父控制器(尽管festivalId
的参数是其中的一部分,我想应该会触发重新加载) - 这导致由
app.festival
状态管理的实际节日数据(由festivalId
引用)在整个应用程序中保持不变,因为基本上它只是初始化app.festival
控制器的一个实例",不管$stateParams
- when I link to the
app.festival.overview
state for the first time, for example with URL/festival/33/overview
, the the state's controller as well as its abstract parent controller forapp.festival
are initialized correctly - but then, when I go back somewhere else, and then link to something like
/festival/21/overview
, only this state's controller is re-initialized, but not its abstract parent controller (although the parameter for thefestivalId
is part of it and should trigger a reload I suppose) - this results in the actual festival data (referenced by
festivalId
) which is managed by theapp.festival
state remains the same throughout the entire app because basically it just initializes one "instance" of the controller forapp.festival
regardless of different$stateParams
我需要这种结构的原因是需要有一整部分的页面(状态)来处理单个节日(应该由 app.festival
状态管理).
The reason I need that structure is that there needs to be a whole section of pages (states) that deal with a single festival (which should be managed by the app.festival
state).
$stateProvider
.state( 'app', {
url: '',
abstract: true,
views: {
'appContent': {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
}
}
})
.state( 'app.general', {
url: '/general',
abstract: true,
views: {
'mainContent': {
templateUrl: 'views/sections/general.html',
controller: 'GeneralCtrl'
}
}
})
.state( 'app.festival', {
url: '/festival/{festivalId:int}',
abstract: true,
views: {
'mainContent': {
templateUrl: 'views/sections/festival.html',
controller: 'FestivalCtrl'
}
}
})
.state( 'app.general.festivals', {
url: '/festivals',
views: {
'generalContent': {
templateUrl: 'views/pages/general-festivals.html',
controller: 'GeneralFestivalsCtrl'
}
}
})
.state( 'app.general.events', {
url: '/events',
views: {
'generalContent': {
templateUrl: 'views/pages/general-events.html',
controller: 'GeneralEventsCtrl'
}
}
})
.state( 'app.general.event', {
url: '/events/{eventId:int}',
views: {
'generalContent': {
templateUrl: 'views/pages/general-event.html',
controller: 'GeneralEventCtrl'
}
}
})
.state( 'app.festival.overview', {
url: '/overview',
views: {
'festivalContent': {
templateUrl: 'views/pages/festival-overview.html',
controller: 'FestivalOverviewCtrl'
}
}
});
.state( 'app.festival.guide', {
url: '/guide',
views: {
'festivalContent': {
templateUrl: 'views/pages/festival-guide.html',
controller: 'FestivalGuideCtrl'
}
}
});
如果有人能帮助我就好了,因为我已经花了很多时间研究这个问题,但还没有找到解决方案.如果您需要更深入地了解代码的特定部分,我也很乐意将其发布在这里.
It would be great if anyone could help me out there as I've put quite some hours into researching the issue, but have not found a solution yet. If you need more insight into specific parts of the code, I'll gladly post it here as well.
推荐答案
这是 Ionic 的默认行为.它默认缓存视图和控制器执行以提高性能.您可以使用 cache: false
:
This is the default behaviour of Ionic. It by default caches view and controller execution to improve performance. You can disable it with cache: false
:
$stateProvider.state('myState', {
cache: false,
url : '/myUrl',
templateUrl : 'my-template.html'
});
或者您可以使用 ui-sref-opts
在 URL 级别禁用它 如何在 ui-sref 标记中放置重新加载选项
Or you can disable it at URL level using ui-sref-opts
how to put reload option in ui-sref markup
请参阅缓存文档.
这篇关于即使 `$stateparams` 改变,控制器也只初始化一次的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!