ionic状态改变时动态(强制)刷新页面

来源:互联网 发布:陈秋平网络大电影 编辑:程序博客网 时间:2024/04/29 21:19

$state.go(stateName,params,config);使用这个方法调到某个状态后,有时需要强制刷新当前页面,使其向后台发起请求,获取最新数据。


1.这种需求的场景举例:


这是处于待办状态(没有被评价的工作记录处于待办状态)的工作记录。

注意:此时待办的工作记录数为45132条



当点击其中一条记录


然后点击评价工作记录对其进行评价


点击评价按钮,评价当前工作记录




评价完成之后,状态就需要跳转至初始页面,并且强制刷新页面,从后台获取数据。

注意:此时待办的工作记录数为45131条,说明刷新成功。



2.实现方式

2.1{reload:true}

强制刷新页面网上资料说使用$state.go("tab.backlog",{},{reload:true}),其中{reload:true}的配置可以实现强制刷新,但是经过我的实验之后发现没有起任何作用。

2.2cache:false

$statePrivider.state({})这个方法中的参数是对象,其中有项属性配置是cache:true/false, ,默认为true。在此,将其配置为false,此时,这个状态就不会有缓存,也就可以实现每次处于该状态时刷新页面,也就相当于实现了强制刷新。(注意:需要继续向下看,很可能此时你任然看不到页面数据被刷新)


如果页面数据是通过$http从后台使用ajax获取的数据,那么页面数据任然得不到刷新。

findPendentRecordList:function(postParams){    var url =Config.basePath+this.tableName+"/findPendentRecordList.do?callback=JSON_CALLBACK";    return $http.jsonp(url,{params:postParams});},

原因在于:在ionic中,$http任何请求默认都是有缓存的,即下面的属性默认是这样配置的

$httpProvider.defaults.cache = true;

也就是说虽然把$state的cache设为了false,他会每次都从后台获取数据,但是$http的cache却为true,那个$http这个偷懒的家伙就会从自己的缓存中拿出数据,而并不会真正的从后台获取,故此,页面数据任然得不到真正的刷新。


看到这里,有人肯定已经想到了解决的办法:将$http的cache设为false,OK,  如愿以偿,万事大吉,效果实现了。

$httpProvider.defaults.cache = false;

但这种设置会把你其他的$http请求的cache一同全部设为false,不好之处在于数据没有缓存,每次需要从后台获取,速度,性能不高。所以,使用另一种方式将需要做强制刷新的$http的请求cache设为false即可,设置方法为:$http.get()或$http.post()或$http.jsonp()等等请求方法中第二个参数是一个对象,在其中添上cache:false的配置。

findPendentRecordList:function(postParams){    var url =Config.basePath+this.tableName+"/findPendentRecordList.do?callback=JSON_CALLBACK";    return $http.jsonp(url,{params:postParams,cache:false});},

总结:

实现强制刷新页面的方式有:

1.{reload:true},目前我没有试验成功。

2.同时将$state和,$http的cache都设为false




看到这里,我相信你的页面已经可以强制刷新了。


2.3动态设置$http的cache

然而,虽然上述方法能达到效果,但不知你有没有发现,随之带来的问题就是每次当路由切换到该状态时,页面都会从后台获取数据。浪费流量、速度慢、用户体验差。

因此,我们需要改变方法。


$state的cache任然设置为false,而$http的cache需要按照需要(例如:上述功能在点击了评价按钮之后,跳转至tab.home状态时设为false,而其他情况下都设为true)动态设置为true OR false。


动态设置的方法:

首先,在state中添加params:{isCache:true},配置项,该项的含义是,这个状态可以接受一个isCache的参数。,默认状态下为true

//代办模块.state('tab.backlog',{    url:'/backlog',    views:{        'tab-backlog':{            templateUrl:'templates/backlog/tab-backlog.html',            controller:'BacklogCtrl'        }    },   cache:false,    params:{        isCache:true    }})

然后,在使用$state.go()方法转到该状态时,在其第二个参数中加入如下的配置

$state.go("tab.backlog",{isCache:false});


接着,在需要刷新的那个页面controller中使用$stateParams.isCache获取到上面传递的值,并注意,把这个isCache:$stateParams.isCache加到请求参数中

$scope.queryConditions = {     isCache:$stateParams.isCache };$dataService.findPendentRecordList($scope.queryConditions).success(successCallback);


最后,在$http请求参数中配置上cache属性,其值为刚才你传递过来的请求参数中的isCache的值,此时就能从后台获取数据。

findPendentRecordList:function(postParams){    var url =Config.basePath+this.tableName+"/findPendentRecordList.do?callback=JSON_CALLBACK";    return $http.jsonp(url,{params:postParams,cache:postParams.isCache});},

不需要强制刷新时,就像下面这样切换状态,不配置参数即可。

$state.go("tab.backlog");

因为isCache默认为true

 params:{        isCache:true    }


经过一番折腾,虽然路由的cache为false,每次都会从后台获取数据,但是由于$http此时cache咱们给他的默认值为true,所以,实际上$http是从缓存中获取的数据,而并没有真正意义上向后台发送请求。




1 1
原创粉丝点击