at present, a project in the company uses a lot of js and css files in angularjs1.5, to load lazily in the $ocLazyLoad of resolve.

however, I found a problem that the css and js, loaded with $ocLazyLoad didn"t clean up after the page switch, and hung in head all the time, accumulating more and more, and then a lot of class names of the same name were contaminated.

is there any way to enable files loaded by $ocLazyLoad only under the current route?

Code sample:

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);