Angularjs实现页面模板清除的方法
前几天项目在上线过程中,出现了一些新问题。页面在切换时由于前一个页面的模板清理不及时,会造成页面的重叠。导致这个问题的原因是:页面模板缓存,即上一个页面退出时,浏览器没有及时清空上一个页面的模板,导致新页面加载时,旧页面模板依然存在,从而页面出现重叠。
模板缓存清除:
模板缓存的清除包括传统的 html标签设置清除缓存,以及angularjs的一些配置清除,和angularjs的路由切换清除
1、以下是传统的清除浏览器的方法
htmlmeta标签设置清除缓存
<!-- 清除缓存 --> <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="pragma" content="no-cache" /> <meta http-equiv="expires" content="0" />
清理form表单临时缓存
<body onload="javascript:document.formname.reset()">
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?" + new date().gettime(), //随机数 controller: 'discountcoupon', cache: false, //cache配置 }) .state("customerphone", { url: "/customerphone", templateurl: "customerphone.html?" + new date().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) { function handlerequestfn(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); return response.data; }, handleerror);
所以可以通过禁掉缓存,在 $templaterequest 的源码中将 $tempaltecache去掉,达到清除模板缓存的目的,不过这个一般不建议直接修改框架源代码!
总结
以上所述是小编给大家介绍的angularjs实现页面模板清除的方法,希望对大家有所帮助