如何重新加载当前状态？

Posted 2023-02-19

【中文标题】如何重新加载当前状态？

【英文标题】：How to reload the current state?

【发布时间】：2014-03-09 23:52:28

【问题描述】：

我正在使用 Angular UI 路由器，并希望重新加载当前状态并刷新所有数据/重新运行当前状态的控制器及其父级。

我有 3 个州级别：directory.organisations.details

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

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

我试过了：

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

它进入父状态但不重新加载控制器，我猜是因为路径没有改变。理想情况下，我只想保持 directory.organisations.details 状态并刷新父级中的所有数据。

我也试过了：

$state.reload()

我在 $state.reload 的 API WIKI 上看到了这个“（控制器正在重新实例化的错误，很快就会修复）。”

任何帮助将不胜感激？

【问题讨论】：

我已经解决了这个问题： $state.transitionTo($state.current, $stateParams, reload: true, inherit: false, notify: true );

在哪里添加这段代码？

那么这个错误现在已经修复了吗？ github.com/angular-ui/ui-router/wiki/…

代码$state.transitionTo($state.current, $stateParams, reload:true, inherit:false)应该添加到哪里？在我的状态重新加载时遇到同样的问题正在丢失所有数据。

【参考方案1】：

我发现这是使用 ui-router 刷新的最短工作方式：

$state.go($state.current, , reload: true); //second parameter is for $stateParams

更新更新版本：

$state.reload();

这是一个别名：

$state.transitionTo($state.current, $stateParams,  
  reload: true, inherit: false, notify: true
);

文档：https://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state#methods_reload

【讨论】：

可能值得注意的是，这些都没有真正重新加载页面。如果你想重新加载状态和页面，我认为没有ui-router 方法。做window.location.reload(true).

@SimpleAsCouldBe 如果你想对它更有棱角，你可以做$window.location.reload();。虽然这看起来有点矫枉过正，但它可以使测试/模拟/了解所有依赖关系的一段代码变得更容易一些。

只是好奇，“$state.current”到底是什么意思？我在 ui-router 的 API 上看不到清晰的解释，任何帮助将不胜感激，谢谢！

@user2499325 : $state.current 返回一个对象，其中包含您拥有的所有数据 stateProvider : ``` url: "/place/:placeId", controller: "NewPlaceController", controllerAs: “placeVM”，templateUrl：“places/new.place/new.place.details.html”，名称：“index.places.placeDetails”```

如果您已经加载了这样的参数，您可以将 替换为 $stateParams：$state.go($state.current, $stateParams, reload: true);

【参考方案2】：

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

$state.transitionTo($state.current, $stateParams, 
    reload: true,
    inherit: false,
    notify: true
);

【讨论】：

你会在哪里添加它，这样它就不会导致无限循环？

这会重新解决状态的resolve项目吗？

此外，如果您将调用更改为 $state.params，则不必注入 $stateParams

比当前投票率最高的答案要好得多，实际上是重新加载页面。如果您遇到无限循环问题，则您的重新加载可能位于错误的位置。我只在单击按钮时使用它

@ManojG 有点晚了，但是您可以将此代码放在需要强制重新加载的任何位置 - 可能在 ng-click 指令函数或其他事件中。出于明显的原因（无限循环），不应在每次页面加载时都执行此操作

【参考方案3】：

这将是最终的解决方案。 （灵感来自@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();

【讨论】：

inifinit 死循环

听起来你有一个拦截器在某处被触发。我已经对该解决方案进行了多次测试，并且效果很好。

@MK 谢谢你的留言。它引导我解决我自己的不同问题。我花了几个小时试图找出为什么我的请求会增加一倍，然后增加三倍等等，这完全是因为一个拦截器 (github.com/witoldsz/angular-http-auth)。

【参考方案4】：

用于离子框架

$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。拯救了我的一天。

我认为将 $state.go 替换为 $state.transitionTo。所以无论你调用 $state.go，只要替换它。它可能看起来像 $state.transitionTo('tab-name', key: value, reload: true, inherit: true, notify: true

cache: false 可以解决问题.. 但它对性能的影响有多大？

用 $state.transitionTo 更改 $state.go 以更改状态并重新加载 @ManojG

我是否必须包含一些新库才能使用$state？我正在运行离子 1.4.0，角度 1.5.3

【参考方案5】：

可能更清洁的方法如下：

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

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

【讨论】：

您也可以使用 ui-sref-opts="reload: 'child.state'" 来避免重新加载整个页面，其中 'child.state' 是代表您的实际状态的字符串。

【参考方案6】：

@Holland Risley 的答案现在作为 api 在最新的 ui-router 中提供。

$state.reload();

强制重新加载当前状态的方法。所有的决议都是 重新解析，重新实例化控制器，重新触发事件。

http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state

【参考方案7】：

$state.go($state.current, $stateParams, reload: true, inherit: false);

【参考方案8】：

$scope.reloadstat = function ()  $state.go($state.current, , reload: true); ;

【参考方案9】：

如果您想重新加载整个页面，就像看起来一样，只需将 $window 注入您的控制器，然后调用

$window.location.href = '/';

但如果您只想重新加载当前视图，请注入 $scope、$state 和 $stateParams（后者以防万一您需要在即将到来的重新加载中更改一些参数，例如您的页码），然后调用this 在任何控制器方法中：

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

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

【参考方案10】：

总是有效的愚蠢解决方法。

$state.go("otherState").then(function()
     $state.go("wantedState")
);

【参考方案11】：

对于 Angular v1.2.26，上述方法均无效。调用上述方法的 ng-click 必须单击 两次 才能重新加载状态。

所以我最终使用 $timeout 模拟了 2 次点击。

$provide.decorator('$state',
        ["$delegate", "$stateParams", '$timeout', function ($delegate, $stateParams, $timeout) 
            $delegate.forceReload = function () 
                var reload = function () 
                    $delegate.transitionTo($delegate.current, angular.copy($stateParams), 
                        reload: true,
                        inherit: true,
                        notify: true
                    )
                ;
                reload();
                $timeout(reload, 100);
            ;
            return $delegate;
        ]);

【讨论】：

Navigation.reload() 需要在 Angular 1.3.0-rc0 上单击两次，但 transitionTo() 工作正常。如果您遇到此问题，请尝试升级

【参考方案12】：

对我来说一切都失败了。唯一有效的...是将 cache-view="false" 添加到我想要在访问时重新加载的视图中。

来自本期https://github.com/angular-ui/ui-router/issues/582

【讨论】：

你应该补充一下这是用于离子的

【参考方案13】：

不知道为什么这些似乎都不适合我；最终做到的是：

$state.reload($state.current.name);

这是 Angular 1.4.0

【参考方案14】：

我有多个嵌套视图，目标是只重新加载一个包含内容的视图。 我尝试了不同的方法，但唯一对我有用的是：

//to reload
$stateParams.reload = !$stateParams.reload; //flip value of reload param
$state.go($state.current, $stateParams);

//state config
$stateProvider
  .state('app.dashboard', 
    url: '/',
    templateUrl: 'app/components/dashboard/dashboard.tmpl.html',
    controller: 'DashboardController',
    controllerAs: 'vm',
    params: reload: false //add reload param to a view you want to reload
  );

在这种情况下，只会重新加载需要的视图，并且缓存仍然有效。

【讨论】：

重新加载 true 或 false，你提到的是 false。 false 是否会重新加载最新更改的内容？

【参考方案15】：

我知道有很多答案，但我发现在不导致整个页面刷新的情况下执行此操作的最佳方法是在我想要刷新的路由上创建一个虚拟参数，然后当我调用路由时我将随机数传递给虚拟参数。

            .state("coverage.check.response", 
                params:  coverageResponse: null, coverageResponseId: 0, updater: 1 ,
                views: 
                    "coverageResponse": 
                        templateUrl: "/Scripts/app/coverage/templates/coverageResponse.html",
                        controller: "coverageResponseController",
                        controllerAs: "vm"
                    
                
            )

然后调用该路由

$state.go("coverage.check.response",  coverageResponse: coverage, updater: Math.floor(Math.random() * 100000) + 1 );

像魅力一样工作并处理解决方案。

【参考方案16】：

您可以使用@Rohan 回答https://***.com/a/23609343/3297761

但如果你想让每个控制器在视图更改后重新加载，你可以使用

myApp.config(function($ionicConfigProvider)  $ionicConfigProvider.views.maxCache(0); ... 

【参考方案17】：

如果您使用的是 ionic v1，上述解决方案将不起作用，因为 ionic 已将模板缓存作为 $ionicConfigProvider 的一部分启用。

解决这个问题有点麻烦 - 您必须在 ionic.angular.js 文件中将缓存设置为 0：

$ionicConfigProvider.views.maxCache(0);

【参考方案18】：

我遇到了这个问题，它让我很头疼，我的路由是从 JSON 文件中读取的，然后输入到指令中。我可以单击 ui 状态，但无法重新加载页面。所以我的一位同事向我展示了一个不错的小技巧。

获取您的数据 在您的应用配置中创建加载状态 在根作用域中保存您想要进入的状态。 在 app.run 中将您的位置设置为“/loading” 在加载控制器中解析路由承诺，然后将位置设置为您的预期目标。

这对我有用。

希望对你有帮助