使用Ionic Framework在登录/注销时清除历史记录并重新加载页面


80

我是Ionic的移动应用程序开发的新手。在登录和注销时,我需要重新加载页面以刷新数据,但是,$state.go('mainPage')无需重新加载即可将用户带回视图-永远不会调用其背后的控制器。

有没有办法清除历史记录并在Ionic中重新加载状态?

Answers:


124

欢迎使用框架!实际上,Ionic中的路由由ui-router驱动。您可能应该检查一下先前的SO问题,以找到几种不同的方法来完成此任务。

如果只想重新加载状态,则可以使用:

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

如果您实际上要重新加载页面(例如,要重新引导所有内容),则可以使用:

$window.location.reload(true)

祝好运!


我想将所有从远程服务器提取的css / js文件捆绑在index.html中。但是,我希望仅在发生更改时才重新加载这些内容。我应该如何构造呢?
mylord 2014年

不知道我是否了解你@mylord。您是在谈论实时重装吗?也许您对Html5脱机缓存/清单感兴趣,如下所述:tmkmobile.wordpress.com/2012/03/04/html5-offline-solution 我认为您可能正在尝试执行此问题的初衷以外的其他事情。
JimTheDev 2014年

13
$ state.go($ state.current,{},{reload:true}); 此解决方案不适用于我。
IamStalker 2015年

@IamStalker您可以提供任何进一步的信息吗,或者可以提供Codepen / Fiddle / plunk为例?
JimTheDev

9
$state.go($state.current, {}, {reload: true});cache:true在状态定义中(如果省略了高速缓存,则为默认值)不起作用。在#ionic 1.0.0-RC2和1.0.0中测试。看我的答案。
ABCD.ca 2015年

25

我发现JimTheDev的答案仅在状态定义已cache:false确定时才有效。使用已缓存的视图,您可以执行以下操作$ionicHistory.clearCache(),然后$state.go('app.fooDestinationView')从一种状态导航到已缓存但需要刷新的状态。

在这里查看我的答案,因为它需要对Ionic进行简单的更改,并且我创建了一个拉取请求:https : //stackoverflow.com/a/30224972/756177


1
好东西。我实际上并没有在离子应用程序中使用此功能,因此我对后续的缓存功能表示赞赏。看来您的PR即将达到1.0.1。发布该消息后,我会在原始帖子中做一个记录,以向您致谢,并提示其他人看看。
JimTheDev

18

正确答案:

$window.location.reload(true);

1
该答案被标记为低质量。您能解释为什么这是正确的答案吗?
豪尔赫·雷涛2014年

1
因为它使用的$windowwindow
EpokK,2014年

正确的是,如果使用.location.reload语法,则可以使用$ window。我已经更改了上面的答案,以使我们与以后的读者保持一致。$ state.go语法在某些情况下也可能有用。
JimTheDev 2014年

只有这个答案对我有所帮助,而没有被打勾
Michal

我曾经喜欢这种方法,但是有人报告说这会导致某些设备(Android 4.4,Chrome)上的无限重载循环。
Oleg Cheremisin

18

我找到了一个解决方案,可以帮助我完成它。cache-view="false"ion-view标签上设置解决了我的问题。

<ion-view cache-view="false" view-title="My Title!">
  ....
</ion-view>

禁用缓存视图会严重降低性能,因此应避免使用此选项。相反,您可以处理ionicView事件。参见: stackoverflow.com/questions/25192172/…–
ezain

@ezain,能否请您告诉我性能如何受到影响?
Rajeshwar

@Rajeshwar,启用高速缓存系统后,Ionic会将隐藏视图生成的所有DOM保留为隐藏,并且当发生更改视图时,您无需重新计算DOM。如果您的DOM繁重,并且需要在所有过渡更改中生成它,则可以欣赏过渡动画中的滞后。如果仅禁用禁用缓存的原因是重新加载,则使用ionicView事件。
ezain 2015年

@ezain,实现禁用缓存功能的方法有很多。我几乎尝试了所有这些方法,但对我没有任何帮助。而这个给了我我所需要的。即使页面很小,我在加载该页面时也看不到任何明显的滞后。所以我比其他方式更喜欢这种方式。
Rajeshwar

11

重新加载页面不是最佳方法。

您可以处理状态更改事件以重新加载数据,而无需重新加载视图本身。

在此处阅读有关ionicView生命周期的信息:

http://blog.ionic.io/navigating-the-changes/

并处理beforeEnter事件以重新加载数据。

$scope.$on('$ionicView.beforeEnter', function(){
  // Any thing you can think of
});

这似乎是最好的方法。
markau

具体来说,您可以检查状态是否来自缓存,如果是,请调用一些API对其进行刷新:$scope.$on('$ionicView.beforeEnter', function(scopes, states) { if (states.fromCache) { ... } }
jakub.g

@ jakub.g如果您不想缓存视图,则可以为此特定视图禁用缓存,这更加简单。
ezain

6

就我而言,我只需要清除视图并重新启动控制器。我可以用这个片段来表达我的意图:

$ionicHistory.clearCache([$state.current.name]).then(function() {
  $state.reload();
}

缓存仍在工作,似乎只清除了视图。

ionic --version 说1.7.5。


附录:当状态具有参数时,必须在视图/状态标识中定义它们。检查以下pastebin:pastebin.com/2CaGYpnz
glaucomorais,2016年

错误代码中的错误正确版本$ ionicHistory.clearCache([$ state.current.name])。then(function(){$ state.reload();});
基里尔A

只是缺少括号
user623396'17

1

上面提到的所有解决方案都不适用于与localhost!不同的主机名。

我必须添加notify: false到传递给的选项的列表中$state.go,以避免在$window.location.reload调用被调用之前调用Angular更改侦听器。最终代码如下:

$state.go('home', {}, {reload: true, notify: false});

>>>编辑-根据您的浏览器,可能需要$ timeout >>>

$timeout(function () { $window.location.reload(true); }, 100);

<<<编辑结束<<<

关于ui-router reference的更多信息。


0

当我看到网站感到困惑时,我试图使用angularjs刷新页面,但没有代码可用于该代码,然后我得到了使用以下方法重新加载页面的解决方案

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

在可以正常工作的功能中使用它。


0

我需要重新加载状态才能使滚动条工作。他们通过另一个州-“注册”时没有工作。如果该应用在注册后被强制关闭并再次打开,即直接进入“ home”状态,则滚动条可以正常工作。上述解决方案均无效。

注册后,我更换了:

$state.go("home");

window.location = "index.html"; 

应用程序已重新加载,并且滚动条正常工作。


0

控制器仅被调用一次,您应该保留此逻辑模型,我通常要做的是:

我创建一个方法 $scope.reload(params)

在此方法的开头,我调用$ionicLoading.show({template:..})以显示我的自定义微调器

当可能的重装过程完成时,我可以$ionicLoading.hide()作为回调调用

最后,在“刷新”按钮中,添加 ng-click = "reload(params)"

该解决方案的唯一缺点是您失去了离子导航历史记录系统

希望这可以帮助!


0

如果要在更改视图后重新加载,则需要

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

如果您想使该视图成为新的“根”,则可以告诉ionic,下一个视图将成为根

 $ionicHistory.nextViewOptions({ historyRoot: true });
 $state.go('app.xxx');
 return;

如果要在每次视图更改后重新加载控制器

app.config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) {

$ionicConfigProvider.views.maxCache(0);


0

正如@ezain所指出的,仅在必要时才重新加载控制器。当更改状态而不是重新加载控制器时,更新数据的另一种更干净的方法是使用广播事件并在需要更新视图数据的控制器中侦听此类事件。

示例:在登录/注销功能中,您可以执行以下操作:

$scope.login = function(){
    //After login logic then send a broadcast
    $rootScope.$broadcast("user-logged-in");
    $state.go("mainPage");
};
$scope.logout = function(){
   //After logout logic then send a broadcast
   $rootScope.$broadcast("user-logged-out");
   $state.go("mainPage");
};

现在,在mainPage控制器中,通过使用$ on函数来监听mainPage Controller中的广播,触发视图中的更改,如下所示:

$scope.$on("user-logged-in", function(){
     //update mainPage view data here eg. $scope.username = 'John';
});

$scope.$on("user-logged-out", function(){
    //update mainPage view data here eg. $scope.username = '';
});

-1

我尝试了许多方法,但发现此方法绝对正确:

$window.location.reload();

希望这可以帮助其他人像我这样的日子停留在版本上:angular 1.5.5,ionic 1.2.4,angular-ui-router 1.0.0

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.