我从bootswatch下载了主题，并试图允许用户切换主题。切换主题后，所有引导CSS都会暂时消失，直到加载新主题为止。在加载CSS之前如何防止更改，或者在加载新主题之前切换回默认主题？
index.ejs（在头）
<link rel="stylesheet" href="/external/bootstrap/css/bootstrap_yeti.min.css"
ng-if="myTheme == ''">
<link rel="stylesheet" ng-href="/external/bootstrap/css/bootstrap_{{myTheme}}.min.css"
ng-if="myTheme != ''">
选拔
<select class="form-control"
id="theme"
name="theme"
ng-model="theme"
ng-change="newTheme()">
<option value="" disabled>Select Theme</option>
<option ng-repeat="(key, val) in availableThemes" value="{{val}}">{{key}}</option>
</select>
索引控制器
$scope.myTheme = '';
$rootScope.$watch('myTheme', function(value) {
if (value != undefined) {
$scope.myTheme = value;
}
});
选择控制器
$scope.availableThemes = {
Cerulean: 'cerulean',
Cosmo: 'cosmo',
Yeti: 'yeti'
};
$scope.newTheme = function() {
console.log($scope.theme);
if ($scope.theme != undefined) {
$rootScope.myTheme = $scope.theme;
}
}
任何帮助表示赞赏！谢谢
我认为这不是AngularJS的问题。我认为您的方法应该有所不同。
据我所知，主题功能通常按以下方式实现。
为每个主题（蔚蓝，宇宙，雪人）创建一个CSS文件。您应该编辑CSS文件，以免彼此冲突。（将.cerulean，.cosmo，.yeti放在所有CSS选择器的前面。如果使用sass或更少，这会容易得多。）
从HTML头加载所有CSS文件。
<link rel="stylesheet" href="/bootstrap/css/bootstrap_cerulean.min.css"> <link rel="stylesheet" href="/bootstrap/css/bootstrap_cosmo.min.css"> <link rel="stylesheet" href="/bootstrap/css/bootstrap_yeti.min.css">
如果用户选择主题，则将正文或根元素的类更改为相应的主题名称。
<body class="cerulean"> <body class="cosmo"> <body class="yeti">
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句