一尘不染

AngularJS在用户选择上切换CSS主题

angularjs

我从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;
  }
}

任何帮助表示赞赏!谢谢


阅读 224

收藏
2020-07-04

共1个答案

一尘不染

我认为这不是AngularJS的问题。我认为您的方法应该有所不同。

据我所知,主题功能通常按以下方式实现。

  1. 为每个主题(蔚蓝,宇宙,雪人)创建一个CSS文件。您应该编辑CSS文件,以免彼此冲突。(将.cerulean,.cosmo,.yeti放在所有CSS选择器的前面。如果使用sass或更少,将更容易。)

  2. 从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">
  1. 如果用户选择主题,则将正文类别或根元素更改为相应的主题名称。
> >     <body class="cerulean">
>     <body class="cosmo">
>     <body class="yeti">
2020-07-04