快捷導(dǎo)航

Angularjs實(shí)現(xiàn)頁面模板清除的方法

更新時間：2018年07月20日 07:35:32 作者：西嶺千秋雪

這篇文章主要介紹了Angularjs實(shí)現(xiàn)頁面模板清除的方法,需要的朋友可以參考下

前幾天項(xiàng)目在上線過程中，出現(xiàn)了一些新問題。頁面在切換時由于前一個頁面的模板清理不及時，會造成頁面的重疊。導(dǎo)致這個問題的原因是：頁面模板緩存，即上一個頁面退出時，瀏覽器沒有及時清空上一個頁面的模板，導(dǎo)致新頁面加載時，舊頁面模板依然存在，從而頁面出現(xiàn)重疊。

模板緩存清除：

　　模板緩存的清除包括傳統(tǒng)的 HTML標(biāo)簽設(shè)置清除緩存，以及angularJs的一些配置清除，和angularJs的路由切換清除

1、以下是傳統(tǒng)的清除瀏覽器的方法

　　HTMLmeta標(biāo)簽設(shè)置清除緩存

<!-- 清除緩存 -->
<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服務(wù)，通過$httpProvider服務(wù)配置，清除路由緩存。

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、用隨機(jī)數(shù)，隨機(jī)數(shù)也是一種很不錯避免緩存的的方法，即在鏈接 URL 參數(shù)后加上隨機(jī)數(shù)(一般加時間戳) 。用隨機(jī)時間，和隨機(jī)數(shù)一樣。

　　3、在狀態(tài)路由配置中，將cache配置項(xiàng)，配置為false。

.state("discountCoupon", {
  url: "/discountCoupon",
  templateUrl: "discountCoupon.html?" + new Date().getTime(),　　　　//隨機(jī)數(shù)
  controller: 'discountCoupon',
  cache: false,　　　　//cache配置
})
.state("customerPhone", {
  url: "/customerPhone",
  templateUrl: "customerPhone.html?" + new Date().getTime(),　　　　//隨機(jī)數(shù)
  controller: 'customerPhone',
  cache: false,　　　　//cache配置
})

3、angularJs的路由切換清除緩存

angularJs默認(rèn) 模板加載都會被緩存起來，使用的緩存服務(wù)是 $tempalteCache, 發(fā)送模板請求的服務(wù)是$templateRequest，所以可以在路由切換時將上一個頁面的模板清除：

　　1.每次發(fā)送 $http 請求模板完成后，可以調(diào)用 $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服務(wù)里 $templateRequest: $TemplateRequestProvider)服務(wù)。在 $TemplateRequestProvider 服務(wù)里面我們可以看到默認(rèn)使用了 $tempalteCache (本質(zhì)還是 angularJs 的 $cacheFactory 服務(wù)) 服務(wù)，

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

并在獲取模板時，默認(rèn)以 $templateCache 作為 cache使用，將獲取到的模板數(shù)據(jù)，添加到 $templateCache內(nèi)保存。

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去掉，達(dá)到清除模板緩存的目的，不過這個一般不建議直接修改框架源代碼！

總結(jié)

以上所述是小編給大家介紹的Angularjs實(shí)現(xiàn)頁面模板清除的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: