AngularJS 在用户选择时切换 css 主题 [英] AngularJS switch css theme on user selection
问题描述
我从 bootswatch 下载了主题，我正在尝试允许用户切换主题.当主题切换时，所有 bootstap 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 !=''">选择
索引控制器
$scope.myTheme = '';$rootScope.$watch('myTheme', function(value) {如果(值！= 未定义){$scope.myTheme = 价值；}});选择控制器
$scope.availableThemes = {蔚蓝: '蔚蓝',宇宙:'宇宙'，雪人:'雪人'};$scope.newTheme = function() {console.log($scope.theme);如果($scope.theme ！= 未定义){$rootScope.myTheme = $scope.theme;}}感谢任何帮助！谢谢
我认为这不是 AngularJS 的问题.我认为您的方法应该有所不同.
据我所知，主题功能通常如下实现.
为每个主题(蔚蓝、宇宙、雪人)创建一个 CSS 文件.您应该编辑 CSS 文件以免相互冲突.(将 .cerulean、.cosmo、.yeti 放在所有 CSS 选择器的前面.如果你使用 sass 或更少，会容易得多.)
从 HTML 头部加载所有 CSS 文件.
<块引用><link rel="stylesheet" href="/bootstrap/css/bootstrap_cosmo.min.css"><link rel="stylesheet" href="/bootstrap/css/bootstrap_yeti.min.css">如果用户选择了主题，请将主体或根元素的类更改为相应的主题名称.
<块引用><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屋！
