AngularJS切换用户选择的css主题 [英] AngularJS switch css theme on user selection
问题描述
我从bootswatch下载了主题，并试图让用户切换主题。当主题切换时，所有的bootstap css暂时消失，直到新主题被加载。我怎样才能防止改变，直到加载CSS或切换回默认主题，直到新的加载？
index.ejs（在头） p>
< link rel =stylesheethref =/ external / bootstrap / css / bootstrap_yeti.min.css
ng-if =myTheme ==''>
ng-if =myTheme！='' >
选择
< select class =form-control
id =theme
name =theme
ng-model =theme
ng-change = newTheme（） >
< option value =disabled>选择主题< / 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文件（cerulean，cosmo，yeti）。你应该编辑CSS文件不要相互冲突。 （把.cerulean，.cosmo，.yeti放在所有的CSS选择器前面，如果你使用sass或者更少的话，会更容易。）
-
加载所有CSS文件都来自HTML头部。
< link rel =stylesheethref = /bootstrap/css/bootstrap_cerulean.min.css\">
< link rel =stylesheethref =/ bootstrap / css / bootstrap_cosmo.min.css>
< link rel =stylesheethref =/ bootstrap / css / bootstrap_yeti.min.css>
-
如果用户选择一个主题，
$ b
< body class =cerulean >
< body class =cosmo>
< body class =yeti>
I downloaded the themes from bootswatch and I'm trying to allow the user to switch the theme. When the theme is switched all the bootstap css temporarily goes away until the new theme is loaded. How can I prevent the change until the css is loaded or switch back to the default theme until the new one is loaded?
index.ejs (in the head)
<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 != ''">
Selection
<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>
controller on index
$scope.myTheme = '';
$rootScope.$watch('myTheme', function(value) {
if (value != undefined) {
$scope.myTheme = value;
}
});
controller for selection
$scope.availableThemes = {
Cerulean: 'cerulean',
Cosmo: 'cosmo',
Yeti: 'yeti'
};
$scope.newTheme = function() {
console.log($scope.theme);
if ($scope.theme != undefined) {
$rootScope.myTheme = $scope.theme;
}
}
Any help is appreciated! Thank you
I think it is not a problem of AngularJS. I think your approach should be different.
As I know, theme functionality is usually implemented like below.
Create a single CSS file for each theme (cerulean, cosmo, yeti). You should edit CSS files not to conflict each other. (put .cerulean, .cosmo, .yeti in front of all CSS selectors. If you use sass or less, it will be much easier.)
Load all CSS files from the HTML head.
<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">If a user select a theme, change a class of body or root element to a corresponding theme name.
<body class="cerulean"> <body class="cosmo"> <body class="yeti">
这篇关于AngularJS切换用户选择的css主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
