我是Ionic的移动应用程序开发的新手。在登录和注销时,我需要重新加载页面以刷新数据,但是,$state.go('mainPage')
无需重新加载即可将用户带回视图-永远不会调用其背后的控制器。
有没有办法清除历史记录并在Ionic中重新加载状态?
Answers:
欢迎使用框架!实际上,Ionic中的路由由ui-router驱动。您可能应该检查一下先前的SO问题,以找到几种不同的方法来完成此任务。
如果只想重新加载状态,则可以使用:
$state.go($state.current, {}, {reload: true});
如果您实际上要重新加载页面(例如,要重新引导所有内容),则可以使用:
$window.location.reload(true)
祝好运!
$state.go($state.current, {}, {reload: true});
cache:true
在状态定义中(如果省略了高速缓存,则为默认值)不起作用。在#ionic 1.0.0-RC2和1.0.0中测试。看我的答案。
我发现JimTheDev的答案仅在状态定义已cache:false
确定时才有效。使用已缓存的视图,您可以执行以下操作$ionicHistory.clearCache()
,然后$state.go('app.fooDestinationView')
从一种状态导航到已缓存但需要刷新的状态。
在这里查看我的答案,因为它需要对Ionic进行简单的更改,并且我创建了一个拉取请求:https : //stackoverflow.com/a/30224972/756177
正确答案:
$window.location.reload(true);
$window
是window
我找到了一个解决方案,可以帮助我完成它。cache-view="false"
在ion-view
标签上设置解决了我的问题。
<ion-view cache-view="false" view-title="My Title!">
....
</ion-view>
重新加载页面不是最佳方法。
您可以处理状态更改事件以重新加载数据,而无需重新加载视图本身。
在此处阅读有关ionicView生命周期的信息:
http://blog.ionic.io/navigating-the-changes/
并处理beforeEnter事件以重新加载数据。
$scope.$on('$ionicView.beforeEnter', function(){
// Any thing you can think of
});
$scope.$on('$ionicView.beforeEnter', function(scopes, states) { if (states.fromCache) { ... } }
就我而言,我只需要清除视图并重新启动控制器。我可以用这个片段来表达我的意图:
$ionicHistory.clearCache([$state.current.name]).then(function() {
$state.reload();
}
缓存仍在工作,似乎只清除了视图。
ionic --version
说1.7.5。
上面提到的所有解决方案都不适用于与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的更多信息。
控制器仅被调用一次,您应该保留此逻辑模型,我通常要做的是:
我创建一个方法 $scope.reload(params)
在此方法的开头,我调用$ionicLoading.show({template:..})
以显示我的自定义微调器
当可能的重装过程完成时,我可以$ionicLoading.hide()
作为回调调用
最后,在“刷新”按钮中,添加 ng-click = "reload(params)"
该解决方案的唯一缺点是您失去了离子导航历史记录系统
希望这可以帮助!
如果要在更改视图后重新加载,则需要
$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);
.state(url:'/ url',控制器:Ctl,templateUrl:'template.html',cache:false)缓存:false ==>解决了我的问题!
正如@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 = '';
});