angularjs ocLazyLoad加载的css，如何根据不同的页面启用，防止全局污染？

Question

目前公司的一个项目使用的是angularjs1.5，里面的很多js、css文件都是写在resolve的$ocLazyLoad里进行懒加载。

然而我发现一个问题就是，使用$ocLazyLoad加载完成的css和js，在页面切换后竟然没有进行清理，就一直挂在head里，越积越多，然后很多class同名的遭到污染。

有没有什么方法让$ocLazyLoad加载的文件只在当前路由下启用？

代码样例：

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

  // 问题：
  // 当 页面1 加载后，切换到 页面2，
  // 而此时 页面1 的加载的 style-1.css 依然挂在head标签里未消除，
  // 对 页面2 造成了污染

}

angular.module('test').config(config);

Answer 1

目前我还没找到如何销毁oc已加载的css文件，不过有个间接方案：切换路由的时候动态给body切换class名， 每个css文件里的内容都在body的class下，这样可以避免全局污染，通用的class放在index.css里