javascript 如何使angular ui-router的父状态在状态改变时总是执行控制器代码?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/21423962/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 20:53:42  来源:igfitidea点击:

How to make angular ui-router's parent state always execute controller code when state changes?

javascriptangularjsstateangular-uiangular-ui-router

提问by egervari

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 myProfilestate is non-editable, but the child myProfile.editstate is the actual form to edit the profile. Let's ignore if this is how a profile page should work - I'm just playing around with things and learning.

这里的想法是父myProfile状态是不可编辑的,但子myProfile.edit状态是编辑配置文件的实际表单。让我们忽略这是否是个人资料页面应该如何工作 - 我只是在玩弄东西和学习。

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 isgetting 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.editstate into a parent itself and not a child of the myProfilestate, this problem actually goes away and things behave as expected (albeit, the layout looks bad like this).

我注意到的一件事是,如果我将子myProfile.edit状态设置为父状态本身而不是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 Router 可能正在缓存父级的结果,毫无疑问模型中的事情已经改变并且它需要重新运行控制器?

How can I keep my parent-child relationship while still having the parent myProfilepage always execute its controller to reload its data? Basically, I want this to happen whenever $stateis used or when a link is clicked that directs to myProfile. How can I do that?

如何在保持父myProfile页面始终执行其控制器以重新加载其数据的同时保持我的父子关系?基本上,我希望在$state使用或单击指向myProfile. 我怎样才能做到这一点?

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.editto be the default child state of myProfile- how can I do that?

如果我不能按我的要求做,那么我知道我可以设置一堆子状态并让它们按预期工作……但是,我如何为父级设置默认子状态?例如,假设我想myProfile.edit成为的默认子状态myProfile- 我该怎么做?

Thanks!

谢谢!

回答by Afonso Pra?a

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 });

回答by adrichman

Have you tried listening for the "$stateChangeStart" event and/or using $state.reload() ?

您是否尝试过侦听“$stateChangeStart”事件和/或使用 $state.reload() ?

回答by Ammadu

Seems like there is a bug on $state.go which is leaving out the reload options. $state.transitionTo however works for me.

似乎 $state.go 上有一个错误,它忽略了重新加载选项。$state.transitionTo 但是对我有用。

$state.transitionTo('state',null,{reload: true});