Question

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

任何帮助表示赞赏！谢谢

Answer 1

我发现保持简单更好，并且不需要像其他人建议的那样预先加载所有主题。

使用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;
  }
});

其余的保持不变。

Answer 2

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

据我所知，主题功能通常如下所示。

为每个主题创建一个CSS文件（cerulean，cosmo，yeti）。您应该编辑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或root元素的类更改为相应的主题名称。
```
<body class="cerulean">
<body class="cosmo">
<body class="yeti">
```

Answer 3

尝试这种方法它会起作用..

<link href="css/style1.css" ng-if="load">
<link href="css/style2.css" ng-if="!load">

<body>
<input type="button" ng-click="changeTheme()" value="Change Theme"/>
</body>
<script>
$scope.load=true;
$scope.changeTheme=function(){
$scope.load=!$scope.load;
}
<script>

Answer 4

如果您在首次加载时包含所有主题，则所有主题都必须由浏览器加载。用户是否会切换主题甚至不清楚。那么为什么要加载所有这些呢？所以这里有几个选择。

<强> 1。 NG-如果

尝试将广告ng-if添加到link

<link ng-if="theme" ng-href="{{theme}}">

我不确定它是否会起作用，但我已经读过一些适用于某些人的地方

<强> 2。能见度

我正在从ipad打字，所以生病很短。

使用类似的东西创建css文件

Body .container {display:none}
Body .loader {display:block}

将所有内容放入容器类div中。创建兄弟div类加载器并在那里放置加载器动画。

首先在头部加载/链接此文件。然后在每个主题中链接您的主题添加取消这些规则。

Body .container {display:block}
Body .loader {display:none}

所以在css重新加载的那一刻，你将有一个加载器动画。

AngularJS切换用户选择的css主题

4 个答案: