前几天项目在上线过程中,出现了一些新问题。页面在切换时由于前一个页面的模板清理不及时,会造成页面的重叠。导致这个问题的原因是:页面模板缓存,即上一个页面退出时,浏览器没有及时清空上一个页面的模板,导致新页面加载时,旧页面模板依然存在,从而页面出现重叠。
模板缓存清除:
模板缓存的清除包括传统的 HTML标签设置清除缓存,以及angularJs的一些配置清除,和angularJs的路由切换清除
1、以下是传统的清除浏览器的方法
HTMLMeta标签设置清除缓存
rush:js;">
清理form表单临时缓存
rush:js;">
2、angularJs配置清除缓存
1、清除路由缓存,在route路由配置中,注入$httpProvider服务,通过$httpProvider服务配置,清除路由缓存。
rush:js;">
app.con
fig(["$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。
rush:js;">
.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配置
})
3、angularJs的路由切换清除缓存
angularJs默认 模板加载都会被缓存起来,使用的缓存服务是 $tempalteCache,发送模板请求的服务是$templateRequest,所以可以在路由切换时将上一个页面的模板清除:
1.每次发送 $http 请求模板完成后,可以调用 $tempalteCache.remove(url) 或 $tempalteCache. removeAll 清除所有模板缓存。
rush:js;">
$rootS
cope.$on('$stateChangeStart',//路由开始切换
function (event,toState,toP
arams,fromState,fromP
arams) {
//路由开始切换,清除以前所有模板缓存
if (fromState.templateUrl !== undefined) {
$templateCache.remove(fromState.templateUrl);
// $templateCache.removeAll();
}
});
$rootS
cope.$on('$stateChangeSuccess',//路由切换完成
function (event,fromP
arams) {
//路由切换成功,清除上
一个页面模板缓存
if (fromState.templateUrl !== undefined) {
$templateCache.remove(fromState.templateUrl);
// $templateCache.removeAll();
}
});
2.使用 $provide.decorator
改写原生的 $templateRequest
(angularJs 自带 $provide服务里 $templateRequest: $TemplateRequestProvider)服务。在 $TemplateRequestProvider 服务里面我们可以看到默认使用了 $tempalteCache (本质还是 angularJs 的 $cacheFactory 服务) 服务,
rush:js;">
this.$get = ['$templateCache','$http','$q','$sce',function($templateCache,$http,$q,$sce) {
function handleRequestFn(tpl,ig
noreRequestError) {
handleRequestFn.totalPendingRequests++;
并在获取模板时,默认以 $templateCache 作为 cache使用,将获取到的模板数据,添加到 $templateCache内保存。
rush:js;">
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实现页面模板清除的方法。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。
原文地址:https://www.jb51.cc/js/31425.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。