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（除了将2更改为1之外，view2完全相同）：

'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时，它会从head元素中删除view2.css，文本再次变为蓝色。

我如何做到这一点？

Answer 1

来自ocLazyLoad的文档

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

无法卸载javascript，但您可以删除css   使用以下内容删除资源的链接标记：

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

因此，只需在加载view1时为view2运行，反之在加载view2时为view1运行。

如何从特定的ui-router状态删除通过$ ocLazyLoad加载的CSS文件？

1 个答案: