我从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">