如何从特定的UI-ROUTEN状态中删除通过$ oclazyload加载的CSS文件

Question

这是我的应用程序的基本设置：我有一个主应用程序（myApp）和下面的两个模块（view1，view2）。

这是myApp：

angular.module('myApp', [
  'ngRoute',
  'ui.router',
  'oc.lazyLoad',
  'myApp.view1',
  'myApp.view2',
  'myApp.version'
])
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise(function ($injector, $location) {
    var $state = $injector.get("$state");
    $state.go('view1'); 
  });
}])
.config(['$ocLazyLoadProvider',
  function ($ocLazyLoadProvider) {
    $ocLazyLoadProvider.config({
      loadedModules: ['myApp', 'myApp.view1', 'myApp.view2'],
      cssFilesInsertBefore: 'ng_load_plugins_before' // load the css files before a LINK element with this ID. Dynamic CSS files must be loaded between core and theme css files
    });
  }]);

这是View1（View2完全相同，除了更改2s的1）：

'use strict';
angular.module('myApp.view1', ['ngRoute', 'ui.router', 'oc.lazyLoad'])
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider) {
  var view1State = {
    name: 'view1',
    url: '/view1',
    templateUrl: 'view1/view1.html',
    resolve: ['$ocLazyLoad', function ($ocLazyLoad) {
      return $ocLazyLoad.load({
        insertBefore: '#ng_load_plugins_before',
        files: [
          'view1/view1.css'
        ]
      });
    }],
  }
  $stateProvider.state(view1State);
}])
.controller('View1Ctrl', [function() {
}]);

view1.css将所有文本更改为蓝色，view2.css将所有文本更改为红色。

这是当前工作的方式：我从View1开始，所有文本都是蓝色的。我转到view2，它将view2.css添加到head元素中，但是当我返回view1时，它不会卸载view2.css，因此文本永远保持红色。

这是我希望它能工作的方式：我从View1开始，所有文本都是蓝色的。然后，我转到View2，它从HEAD元素中删除View1.css并添加View2.CSS，将所有文本更改为红色。当我返回View1时，它会从头部元素中删除View2.css，并且文本再次为蓝色。

我该如何完成？

Answer 1

oclazyload的文档

https://oclazyload.readme.io/docs/faq

没有办法卸载JavaScript，但是您可以通过使用类似的内容删除资源的链接标签：

$('link[href="/url/to/your/file.css"]').remove();

因此，加载View1时只需为View2运行，而View1时，View2。