这是我的应用程序的基本设置:我有一个主应用程序 (myApp) 和下面的两个模块 (view1, view2)。
这是我的应用程序:
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 完全一样,只是把 1 换成了 2):
'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,文本再次变为蓝色。
我该如何做到这一点?