[英]How to make angular ui-router's parent state always execute controller code when state changes?
Let's say we have a parent-child relationship defined in our $stateProvider as follows: 假设我们在$ stateProvider中定义了一个父子关系,如下所示:
.state('myProfile', {
url: "/my/profile",
templateUrl: 'my/profile.html',
controller: 'MyProfileController'
}).state('myProfile.edit', {
url: "/edit",
templateUrl: 'my/profile.edit.html',
controller: 'EditMyProfileController'
});
The idea here is that the parent myProfile
state is non-editable, but the child myProfile.edit
state is the actual form to edit the profile. 这里的想法是父
myProfile
状态是不可编辑的,但子myProfile.edit
状态是编辑配置文件的实际表单。 Let's ignore if this is how a profile page should work - I'm just playing around with things and learning. 让我们忽略,如果这是个人资料页面的工作方式 - 我只是在玩弄东西和学习。
When a user submits the form, I use the $state object to go back to the parent page: 当用户提交表单时,我使用$ state对象返回父页面:
$scope.save = function() {
userResource.update($scope.user, function() {
SessionService.refresh();
$state.go('myProfile'); // also tried with reload: true as well
});
}
After the user saves the profile data - and it is getting saved properly - the parent's view does not get updated unless I hit F5 and refresh the browser. 之后,用户保存配置数据-这是得到正确保存-父母的观点并没有得到更新,除非我打了F5并刷新浏览器。
One thing I have noticed is that if I make the child myProfile.edit
state into a parent itself and not a child of the myProfile
state, this problem actually goes away and things behave as expected (albeit, the layout looks bad like this). 我注意到的一件事是,如果我将子
myProfile.edit
状态变成父本身而不是myProfile
状态的子myProfile
,这个问题实际上会消失,事情就像预期的那样(虽然布局看起来很糟糕)。
It seems that UI Router is maybe caching the result of the parent, unsuspecting that things have changed in the model and that it needs to rerun the controller? 似乎UI路由器可能会缓存父级的结果,不知道模型中的内容已经发生变化,是否需要重新运行控制器?
How can I keep my parent-child relationship while still having the parent myProfile
page always execute its controller to reload its data? 如何在父
myProfile
页面始终执行其控制器以重新加载其数据的同时保持我的父子关系? Basically, I want this to happen whenever $state
is used or when a link is clicked that directs to myProfile
. 基本上,我希望每当使用
$state
或点击指向myProfile
的链接时都会发生这种情况。 How can I do that? 我怎样才能做到这一点?
And if I cannot do what I ask, then I am aware that I can setup a bunch of child states and have them work as intended... however, how can I set the default child state for the parent? 如果我不能按照我的要求做,那么我知道我可以设置一堆子状态并使它们按预期工作...但是,如何为父设置默认子状态? For example, let's say I want
myProfile.edit
to be the default child state of myProfile
- how can I do that? 例如,假设我想
myProfile.edit
是默认的子状态myProfile
-我该怎么办呢?
Thanks! 谢谢!
To force a parent state to reload when navigate to him from a child state you can use both ways below. 要在从子状态导航到父级时强制父状态重新加载,您可以使用以下两种方式。 Pure js or a directive attribute.
纯js或指令属性。
<a ui-sref="myProfile" ui-sref-opts="{ reload: true }">Back to My Profile</a>
or 要么
$state.go('myProfile', null, { reload: true });
您是否尝试过侦听“$ stateChangeStart”事件和/或使用$ state.reload()?
Seems like there is a bug on $state.go which is leaving out the reload options. 似乎$ state.go上有一个错误,它会遗漏重新加载选项。 $state.transitionTo however works for me.
$ state.transition然而对我有用。
$state.transitionTo('state',null,{reload: true});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.