logo标签列表

如何重新加载当前状态？

angularjsangular-uiangular-ui-router
332
我正在使用Angular UI Router，并希望重新加载当前状态、刷新所有数据/重新运行当前状态及其父状态的控制器。

我有3个状态级别：directory.organisations.details

directory.organisations 包含一个组织列表，单击表中的项目会使用$StateParams传递该项目的ID加载directory.organisations.details。因此，在详情状态下，我加载了此项目的详细信息，对其进行编辑，然后保存数据。到目前为止都很好。

现在我需要重新加载此状态并刷新所有数据。

我尝试过：

 $state.transitionTo('directory.organisations');

我猜是因为路径没有改变，所以返回到父状态时不会重新加载控制器。理想情况下，我只想留在directory.organisations.details状态并刷新父级中的所有数据。

我也尝试过：

$state.reload()

我在 $state.reload 的 API WIKI 上看到过这个内容：“（目前控制器重新实例化的 bug，即将修复）”。

任何帮助都将不胜感激。

7
我已经按照以下方式解决了这个问题：$state.transitionTo($state.current, $stateParams, { reload: true, inherit: false, notify: true }); - Holland Risley
1
在哪里添加这段代码？ - Manoj G
那么这个 bug 现在已经修复了吗？https://github.com/angular-ui/ui-router/wiki/Quick-Reference#statereload - addlistener
代码$state.transitionTo($state.current, $stateParams, {reload:true, inherit:false})应该添加在哪里？我的状态重新加载时会丢失所有数据，遇到了同样的问题。 - Evan Burbidge
18个回答
575
21
值得注意的是，这些操作并没有重新加载页面。如果您想重新加载状态和页面，我认为在ui-router中没有相应的方法。请使用window.location.reload(true)。 - SimplGy
15
如果你想更加严谨，可以使用 $window.location.reload(); 来重新加载页面。虽然这看起来有点过度，但它可以使代码的测试、模拟和依赖项更容易被知道。 - edhedges
1
只是好奇，"$state.current" 到底是什么意思？我在 ui-router 的 API 中找不到清晰的解释，任何帮助将不胜感激，谢谢！ - user2499325
3
$state.current返回一个对象，其中包含您在stateProvider中的所有数据:{   url：“/place/:placeId”，   controller：“NewPlaceController”，   controllerAs：“placeVM”，   templateUrl：“places/new.place/new.place.details.html”，   name：“index.places.placeDetails” } - Xavier Haniquaut
2
如果您已经加载了参数，可以使用$stateParams替换{}，如下所示：$state.go($state.current, $stateParams, {reload: true}); - Taku
显示剩余3条评论
154

这个解决方案适用于 AngularJS V.1.2.2：

$state.transitionTo($state.current, $stateParams, {
    reload: true,
    inherit: false,
    notify: true
});
8
你需要在哪里添加这个内容，以便不会引起无限循环？ - Pathsofdesign
5
这会重新解决状态中的“resolve”项目吗？ - TheSharpieOne
7
此外，如果您将该调用更改为$state.params，则无需注入$stateParams。 - Jeff Ancel
4
比目前得票最高的回答效果要好，实际上重新加载了页面。如果你遇到了无限循环的问题，那么你的重新加载位置可能不正确。我只在按钮点击时使用它。 - Dan
2
对于@ManojG来说有点晚了，但是您可以在需要强制重新加载的任何地方放置此代码 - 例如在ng-click指令函数或其他事件中。出于明显的原因（无限循环），不应在每个页面加载时执行此操作。 - sricks
显示剩余5条评论
68

那将是最终的解决方案。（受@Hollan_Risley贴子启发）

'use strict';

angular.module('app')

.config(function($provide) {
    $provide.decorator('$state', function($delegate, $stateParams) {
        $delegate.forceReload = function() {
            return $delegate.go($delegate.current, $stateParams, {
                reload: true,
                inherit: false,
                notify: true
            });
        };
        return $delegate;
    });
});
现在，每当需要重新加载时，只需要调用：
$state.forceReload();
6
死循环 - C. S.
6
听起来你可能有一个触发的拦截器。我已经多次测试了这个解决方案，它可以正常工作。 - M K
2
@MK 谢谢你的提示。它引领我找到了自己不同问题的解决方案。我花了几个小时试图找出为什么我的请求会变成两倍、三倍等等，结果发现是因为一个拦截器 (https://github.com/witoldsz/angular-http-auth) 的缘故。 - Maciej Gurban
57

对于Ionic框架

$state.transitionTo($state.current, $state.$current.params, { reload: true, inherit: true, notify: true });//reload

$stateProvider.
  state('home', {
    url: '/',
    cache: false, //required

https://github.com/angular-ui/ui-router/issues/582

对我来说运行良好，而$state.go无法重定向到新状态。感谢@RouR。救了我的一天。 - Guillaume Wuip
我认为应该用$state.transitionTo来替换掉$state.go。因此，你只需要在之前调用$state.go的地方进行替换即可。具体实现可能类似于$state.transitionTo('tab-name', {key: value},{ reload: true, inherit: true, notify: true }。 - Bill Pope
2
cache: false可以解决问题，但它会对性能产生多大的影响呢？ - FrEaKmAn
ن½؟用$state.transitionToو›؟وچ¢$state.goن»¥و›´و”¹çٹ¶و€په¹¶é‡چو–°هٹ è½½م€‚@ManojG - Gery
我需要引入新的库才能使用 $state 吗？我正在运行 ionic 1.4.0，angular 1.5.3。 - josinalvo
添加 cache: false 可以重新加载指令，你救了我的一天，谢谢。 - khashashin
45

可能更清晰的方法如下：

<a data-ui-sref="directory.organisations.details" data-ui-sref-opts="{reload: true}">Details State</a>

我们只能从 HTML 中重新加载状态。

7
您可以使用 ui-sref-opts="{reload: 'child.state'}" 来避免重新加载整个页面，其中 'child.state' 是表示您实际状态的字符串。 - Michael Fulton
22
16
$state.go($state.current, $stateParams, {reload: true, inherit: false});
14
$scope.reloadstat = function () { $state.go($state.current, {}, {reload: true}); };
7
如果你想重新加载整个页面，就像看起来那样，只需将 $window 注入到你的控制器中，然后调用：
$window.location.href = '/';

但是如果你只想重新加载当前视图，请注入$scope、$state和$stateParams（后者仅在您需要在此即将重新加载时更改某些参数，例如您的页码）,然后在任何控制器方法中调用以下内容：

$stateParams.page = 1;
$state.reload();

AngularJS v1.3.15 angular-ui-router v0.2.15

6
愚蠢的解决方法，但总是有效的。
$state.go("otherState").then(function(){
     $state.go("wantedState")
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接