javascript - AngularJS 在用户选择时切换 css 主题

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>

索引上的 Controller

$scope.myTheme = '';
$rootScope.$watch('myTheme', function(value) {
  if (value != undefined) {
    $scope.myTheme = value;
  }
});

选择 Controller

$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">

并在索引 Controller 中将范围内的 myVar 初始化为“yeti”:

$scope.myTheme = 'yeti';
$rootScope.$watch('myTheme', function(value) {
  if (value != undefined) {
    $scope.myTheme = value;
  }
});

其余保持不变。