angularjs -- 页面模板清除

发布时间：2020-12-17 16:55:19 所属栏目：安全来源：网络整理

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

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

模板缓存清除：

　　模板缓存的清除包括传统的 HTML标签设置清除缓存，以及angularJs的一些配置清除，和angularJs的路由切换清除

1、以下是传统的清除浏览器的方法

　　HTMLmeta标签设置清除缓存

<!-- 清除缓存 -->
<meta http-equiv="Cache-Control" content="no-cache,no-store,must-revalidate" />
="Pragma"="no-cache" ="Expires"="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()cache: false"customerPhone.html?" +  Date().getTime(),　　　　//随机数
    controller: 'customerPhone'
$rootScope.$on('$stateChangeStart',1)">//路由开始切换
     (event,toState,toParams,fromState,fromParams) {
        路由开始切换，清除以前所有模板缓存
        if (fromState.templateUrl !== undefined) {
            $templateCache.remove(fromState.templateUrl);
             $templateCache.removeAll();
        }
    });

$rootScope.$on('$stateChangeSuccess',1)">路由切换完成
    路由切换成功，清除上一个页面模板缓存
     undefined) {
        $templateCache.remove(fromState.templateUrl);
            }
});

　　2.使用 $provide.decorator 改写原生的 $templateRequest (angularJs 自带?$provide服务里??$templateRequest: $TemplateRequestProvider)服务。在 $TemplateRequestProvider 服务里面我们可以看到默认使用了?$tempalteCache?(本质还是 angularJs?的??$cacheFactory 服务)?服务，

this.$get = ['$templateCache','$http','$q','$sce',1)">($templateCache,$http,$q,$sce) {
     handleRequestFn(tpl,ignoreRequestError) {
        handleRequestFn.totalPendingRequests++;

并在获取模板时，默认以 $templateCache 作为 cache使用，将获取到的模板数据，添加到 $templateCache内保存。

return $http.get(tpl,extend({
    cache: $templateCache,
    transformResponse: transformResponse
},httpOptions))
    ['finally']( () {
    handleRequestFn.totalPendingRequests--;
})
    .then( (response) {
        $templateCache.put(tpl,response.data);
         response.data;
    },handleError);

所以可以通过禁掉缓存，在 $templateRequest 的源码中将 $tempalteCache去掉，达到清除模板缓存的目的，不过这个一般不建议直接修改框架源代码！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!