鍍金池/ 問(wèn)答/HTML5  網(wǎng)絡(luò)安全  HTML/ angularjs ocLazyLoad加載的css,如何根據(jù)不同的頁(yè)面啟用,防

angularjs ocLazyLoad加載的css,如何根據(jù)不同的頁(yè)面啟用,防止全局污染?

目前公司的一個(gè)項(xiàng)目使用的是angularjs1.5,里面的很多js、css文件都是寫(xiě)在resolve的$ocLazyLoad里進(jìn)行懶加載。

然而我發(fā)現(xiàn)一個(gè)問(wèn)題就是,使用$ocLazyLoad加載完成的css和js,在頁(yè)面切換后竟然沒(méi)有進(jìn)行清理,就一直掛在head里,越積越多,然后很多class同名的遭到污染。

有沒(méi)有什么方法讓$ocLazyLoad加載的文件只在當(dāng)前路由下啟用?

代碼樣例:

function config ($stateProvider, $urlRouterProvider, $ocLazyLoadProvider, $httpProvider) {
  $stateProvider
    .state('index', {
      url: "/index",
      templateUrl: "src/index.html",
      data: { pageTitle: '首頁(yè)' }
    })
    // 頁(yè)面 1
    .state('index.page1', {
      url: "/page1",
      templateUrl: "src/page-1.html",
      data: { pageTitle: '頁(yè)面 1' },
      resolve: {
        loadPlugin: function ($ocLazyLoad) {
          return $ocLazyLoad.load([
            {
              files: ['css/style-1.css']
            },
          ]);
        }
      }
    })
    // 頁(yè)面 2
    .state('index.page2', {
      url: "/page2",
      templateUrl: "src/page-2.html",
      data: { pageTitle: '頁(yè)面 2' },
      resolve: {
        loadPlugin: function ($ocLazyLoad) {
          return $ocLazyLoad.load([
            {
              files: ['css/style-2.css']
            }
          ]);
        }
      }
    })

  // 問(wèn)題:
  // 當(dāng) 頁(yè)面1 加載后,切換到 頁(yè)面2,
  // 而此時(shí) 頁(yè)面1 的加載的 style-1.css 依然掛在head標(biāo)簽里未消除,
  // 對(duì) 頁(yè)面2 造成了污染

}

angular.module('test').config(config);
回答
編輯回答
空痕

目前我還沒(méi)找到如何銷(xiāo)毀oc已加載的css文件,不過(guò)有個(gè)間接方案:切換路由的時(shí)候動(dòng)態(tài)給body切換class名, 每個(gè)css文件里的內(nèi)容都在body的class下,這樣可以避免全局污染,通用的class放在index.css里

2017年10月4日 10:17