Angularjs实现页面模板清除的方法
前几天项目在上线过程中,出现了一些新问题。页面在切换时由于前一个页面的模板清理不及时,会造成页面的重叠。导致这个问题的原因是:页面模板缓存,即上一个页面退出时,浏览器没有及时清空上一个页面的模板,导致新页面加载时,旧页面模板依然存在,从而页面出现重叠。
模板缓存清除:
模板缓存的清除包括传统的HTML标签设置清除缓存,以及angularJs的一些配置清除,和angularJs的路由切换清除
1、以下是传统的清除浏览器的方法
HTMLmeta标签设置清除缓存
清理form表单临时缓存
2、angularJs配置清除缓存
1、清除路由缓存,在route路由配置中,注入$httpProvider服务,通过$httpProvider服务配置,清除路由缓存。
app.config(["$stateProvider","$urlRouterProvider",'$locationProvider','$httpProvider',function($stateProvider,$urlRouterProvider,$locationProvider,$httpProvider){ if(!$httpProvider.defaults.headers.get){ $httpProvider.defaults.headers.get={}; } $httpProvider.defaults.headers.common["X-Requested-With"]='XMLHttpRequest'; $httpProvider.defaults.headers.get['Cache-Control']='no-cache'; $httpProvider.defaults.headers.get['Pragma']='no-cache'; }]);
2、用随机数,随机数也是一种很不错避免缓存的的方法,即在链接URL参数后加上随机数(一般加时间戳)。用随机时间,和随机数一样。
3、在状态路由配置中,将cache配置项,配置为false。
.state("discountCoupon",{ url:"/discountCoupon", templateUrl:"discountCoupon.html?"+newDate().getTime(),//随机数 controller:'discountCoupon', cache:false,//cache配置 }) .state("customerPhone",{ url:"/customerPhone", templateUrl:"customerPhone.html?"+newDate().getTime(),//随机数 controller:'customerPhone', cache:false,//cache配置 })
3、angularJs的路由切换清除缓存
angularJs默认模板加载都会被缓存起来,使用的缓存服务是$tempalteCache,发送模板请求的服务是$templateRequest,所以可以在路由切换时将上一个页面的模板清除:
1.每次发送$http请求模板完成后,可以调用$tempalteCache.remove(url) 或$tempalteCache.removeAll清除所有模板缓存。
$rootScope.$on('$stateChangeStart',//路由开始切换 function(event,toState,toParams,fromState,fromParams){ //路由开始切换,清除以前所有模板缓存 if(fromState.templateUrl!==undefined){ $templateCache.remove(fromState.templateUrl); //$templateCache.removeAll(); } }); $rootScope.$on('$stateChangeSuccess',//路由切换完成 function(event,toState,toParams,fromState,fromParams){ //路由切换成功,清除上一个页面模板缓存 if(fromState.templateUrl!==undefined){ $templateCache.remove(fromState.templateUrl); //$templateCache.removeAll(); } });
2.使用$provide.decorator改写原生的$templateRequest(angularJs自带$provide服务里 $templateRequest:$TemplateRequestProvider)服务。在$TemplateRequestProvider服务里面我们可以看到默认使用了$tempalteCache(本质还是angularJs的 $cacheFactory服务)服务,
this.$get=['$templateCache','$http','$q','$sce',function($templateCache,$http,$q,$sce){ functionhandleRequestFn(tpl,ignoreRequestError){ handleRequestFn.totalPendingRequests++;
并在获取模板时,默认以$templateCache作为cache使用,将获取到的模板数据,添加到$templateCache内保存。
return$http.get(tpl,extend({ cache:$templateCache, transformResponse:transformResponse },httpOptions)) ['finally'](function(){ handleRequestFn.totalPendingRequests--; }) .then(function(response){ $templateCache.put(tpl,response.data); returnresponse.data; },handleError);
所以可以通过禁掉缓存,在$templateRequest的源码中将$tempalteCache去掉,达到清除模板缓存的目的,不过这个一般不建议直接修改框架源代码!
总结
以上所述是小编给大家介绍的Angularjs实现页面模板清除的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。