angularjs关于页面模板清除的使用方法

这篇文章给大家介绍的内容是关于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?" + 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去掉,达到清除模板缓存的目的,不过这个一般不建议直接修改框架源代码!

相关推荐:

在JS中用slice封装数组方法

关于jQuery的增减类的操作(附代码)

以上就是angularjs关于页面模板清除的使用方法的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2745742.html

(0)
上一篇 2025年3月8日 03:48:47
下一篇 2025年3月7日 19:53:36

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论