Angularjs实现页面模板清除的方法

2023-09-10 02:34:05 70

前几天项目在上线过程中，出现了一些新问题。页面在切换时由于前一个页面的模板清理不及时，会造成页面的重叠。导致这个问题的原因是：页面模板缓存，即上一个页面退出时，浏览器没有及时清空上一个页面的模板，导致新页面加载时，旧页面模板依然存在，从而页面出现重叠。

模板缓存清除：

模板缓存的清除包括传统的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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Angularjs实现页面模板清除的方法

热门推荐

随机推荐