如何重新加载当前状态?

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

我有三个状态级别:directory.organisations.details

directory.organisations包含一个包含组织列表的表。单击表中的一个项目加载directory.organisations.details,其中$StateParams传递该项的ID。所以在细节状态下,我加载这个项目的细节,编辑它们,然后保存数据。到目前为止一切正常。

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

我试过:

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

它会回到父状态但不会重载控制器,我猜是因为路径没有改变。理想情况下,我只想保持在directory.organisations.details状态,并刷新父类中的所有数据。

我也试过:

$state.reload()

我在$state的API WIKI上看到过这个。重新加载”(错误与控制器重新验证现在,修复很快)。

如果有任何帮助,我将不胜感激。

474441 次浏览

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

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

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

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

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

< em > < / em >更新用于更新版本:

$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。$ # methods_reload状态

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

离子骨架

$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 < a href = " https://github.com/angular-ui/ui-router/issues/582 " > < / >

可能更简洁的方法是:

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

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

如果你想重新加载整个页面,就像它看起来的那样,只需将$window注入到控制器中,然后调用

$window.location.href = '/';

但如果你只想重新加载当前视图,注入$scope, $state和$stateParams(后者只是为了以防你需要在即将到来的重新加载中改变一些参数,比如你的页码),然后在任何控制器方法中调用这个:

$stateParams.page = 1;
$state.reload();
< p > AngularJS v1.3.15 Angular-ui-router v0.2.15

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

对我来说,一切都失败了。唯一管用的是……是添加cache-view="false"到视图,我想重新加载时去它。

从这个问题https://github.com/angular-ui/ui-router/issues/582

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

$state.reload();
强制重新加载当前状态的方法。所有的决议都是 重新解析,控制器重新实例化,事件重新触发

< a href = " http://angular-ui.github.io/ui-router/site/ / api / ui.router.state。美元国家”> http://angular-ui.github.io/ui-router/site/ / api / ui.router.state。美元国家< / >

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

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

在这种情况下,只有需要的视图将被重新加载,缓存仍将工作。

愚蠢的变通方法总是有效的。

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

我不知道为什么这些方法对我都不起作用;最后成功的是:

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

这是在Angular 1.4.0中

我有这个问题,它是破坏我的头,我的路由是从一个JSON文件读取,然后馈送到一个指令。我可以点击一个ui状态,但我不能重新加载页面。我的一个同事给我展示了一个很好的小技巧。

  1. 获取你的数据
  2. 在你的应用配置中创建一个加载状态
  3. 将您想要进入的状态保存在rootscope中。
  4. 在app.run中设置你的位置为“/loading”
  5. 在加载控制器中解析路由承诺,然后将位置设置为您的预期目标。

这对我很管用。

希望能有所帮助

我知道有一堆答案,但我发现最好的方法,这样做,而不引起整个页面刷新是在路由上创建一个虚拟参数,我想要刷新,然后当我调用路由时,我传递一个随机数到虚拟参数。

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

很有魅力,能解决问题。

你可以使用@Rohan answer https://stackoverflow.com/a/23609343/3297761

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

myApp.config(function($ionicConfigProvider) { $ionicConfigProvider.views.maxCache(0); ... }
$scope.reloadstat = function () { $state.go($state.current, {}, {reload: true}); };

如果你正在使用ionic v1,上面的解决方案将不起作用,因为ionic已经启用了模板缓存作为$ionicConfigProvider的一部分。

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

$ionicConfigProvider.views.maxCache(0);