提问



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


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


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


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


我努力了:


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


哪个进入父状态,但没有重新加载控制器,我猜因为路径没有改变。理想情况下,我只想留在 directory.organisations.details 状态并刷新父级中的所有数据。


我也尝试过:


$state.reload()


我在API WIKI for $ state.reload上看过这个(控制器现在重新修复的错误,很快就会修复)。


任何帮助,将不胜感激?

最佳参考


我发现这是用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 [24]

其它参考1


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


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

其它参考2


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

其它参考3


用于离子骨架


$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[25]

其它参考4


可能更清除的方法如下:


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


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

其它参考5


@Holland Risley的答案现在可以在最新的ui-router中作为api使用。


$state.reload();



  强制重新加载当前状态的方法。所有结果都是
  重新解析,重新控制控制器,重新触发事件。



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

其它参考6


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

其它参考7


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


$window.location.href = '/';


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


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


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

其它参考8


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

其它参考9


愚蠢的解决方案始终有效。


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

其它参考10


对于角度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;
        }]);

其它参考11


一切都失败了。唯一有效的方法是将cache-view =false添加到我想要重新加载的视图中。





来自这个问题https://github.com/angular-ui/ui-router/issues/582 [27]

其它参考12


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


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


这是使用Angular 1.4.0

其它参考13


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


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


在这种情况下,只需重新加载所需的视图,缓存仍然有效。

其它参考14


我知道有很多答案,但我发现这样做的最好方法是在没有引起整页刷新的情况下,在我要刷新的路线上创建一个虚拟参数,然后当我调用路径时,我传递了一个随机数到虚拟参数。


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


像魅力一样工作并处理结果。

其它参考15


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


但是,如果您想在视图更改后使每个控制器实现显示,则可以使用


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

其它参考16


我有这个问题它破坏了我的头,我的路由从JSON文件读取,然后送入指令。我可以点击一个ui-state但我无法重新加载页面。所以我的一个同事给我看了一个不错的小技巧。



  1. 获取您的数据

  2. 在您的应用配置中创建加载状态

  3. 在根目镜中保存您要进入的状态。

  4. 在app.run
  5. 中将您的位置设置为/loading
  6. 在加载控制器中解析路由承诺,然后将位置设置为预期目标。



这对我有用。


希望能帮助到你

其它参考17


如果您正在使用离子v1,上述解决方案将无法工作,因为离子已启用模板缓存作为$ ionicConfigProvider的一部分。


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


$ionicConfigProvider.views.maxCache(0);