Ele*_*ary 4 html javascript css twitter-bootstrap angularjs
我从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 != ''">
选择
<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;
}
}
任何帮助表示赞赏!谢谢
Jos*_*yol 10
我发现保持简单更好,并且不需要像其他人建议的那样预先加载所有主题.
使用ng-href坚持使用单个标签:
<link rel="stylesheet" ng-href="/external/bootstrap/css/bootstrap_{{myTheme}}.min.css">
并将范围中的myVar初始化为索引控制器中的"yeti":
$scope.myTheme = 'yeti';
$rootScope.$watch('myTheme', function(value) {
if (value != undefined) {
$scope.myTheme = value;
}
});
其余的保持不变.
我认为这不是AngularJS的问题.我认为你的方法应该是不同的.
据我所知,主题功能通常如下所示.
为每个主题创建一个CSS文件(天蓝色,cosmo,雪人).您应该编辑CSS文件,以免相互冲突.(把.cerulean,.cosmo,.yeti放在所有CSS选择器的前面.如果你使用sass或更少,它会更容易.)
从HTML头加载所有CSS文件.
Run Code Online (Sandbox Code Playgroud)<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或root元素的类更改为相应的主题名称.
Run Code Online (Sandbox Code Playgroud)<body class="cerulean"> <body class="cosmo"> <body class="yeti">
| 归档时间： |
|
| 查看次数： |
10812 次 |
| 最近记录： |