Fatal编程技术网
  • javascript/
  • Javascript AngularJS根据用户选择切换css主题

Javascript AngularJS根据用户选择切换css主题

javascript html css angularjs twitter-bootstrap

Javascript AngularJS根据用户选择切换css主题,javascript,html,css,angularjs,twitter-bootstrap,Javascript,Html,Css,Angularjs,Twitter Bootstrap,我从bootswatch下载了主题，我正试图允许用户切换主题。当主题被切换时，所有的bootstap css会暂时消失，直到新的主题被加载。如何在加载css之前阻止更改，或者在加载新主题之前切换回默认主题 index.ejs（在头部） 选择控制器 $scope.availableThemes = { Cerulean: 'cerulean', Cosmo: 'cosmo', Yeti: 'yeti' }; $scope.newTheme = function() {

我从bootswatch下载了主题，我正试图允许用户切换主题。当主题被切换时，所有的bootstap css会暂时消失，直到新的主题被加载。如何在加载css之前阻止更改，或者在加载新主题之前切换回默认主题

index.ejs（在头部）

选择控制器

$scope.availableThemes = {
  Cerulean: 'cerulean',
  Cosmo:    'cosmo',
  Yeti:     'yeti'
};
$scope.newTheme = function() {
  console.log($scope.theme);
  if ($scope.theme != undefined) {
    $rootScope.myTheme = $scope.theme;
  }
}
感谢您的帮助！谢谢

我想这不是安格拉斯的问题。我认为你的方法应该有所不同

正如我所知，主题功能的实现通常如下所示

  • 为每个主题创建一个CSS文件（cerulean、cosmo、yeti）。您应该编辑CSS文件以避免彼此冲突。（将.cerulean、.cosmo、.yeti放在所有CSS选择器前面。如果使用sass或更少，则会更容易。）

  • 从HTML头加载所有CSS文件
  • 如果用户选择了一个主题，则将主体或根元素的类更改为相应的主题名称
    • 如果在首次加载时包含所有主题，则浏览器必须加载所有主题。甚至不清楚用户是否会切换主题。那么，为什么要加载所有这些文件呢。所以这里有几个选择

    1。Ng如果

    如果链接

    <link ng-if="theme" ng-href="{{theme}}">
    将所有内容放入容器类div中。创建同级div类加载器并将加载器动画放置在那里

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

    Body .container {display:block}
Body .loader {display:none}
    因此，在css重新加载时，您将有一个加载程序动画

    试试这种方法，它会奏效的

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

    
$scope.load=true；
$scope.changeTheme=function（）{
$scope.load=！$scope.load；
}
    我发现保持简单更好，而且没有必要像其他人建议的那样预加载所有主题

    使用ng href粘贴到单个标记：

    <link rel="stylesheet" ng-href="/external/bootstrap/css/bootstrap_{{myTheme}}.min.css">
    其余的保持不变。

    尝试使用其中一个异步加载库，如requirejs或dominoes等，并更改其回调中的myTheme变量。我发现我还可以将异步标记添加到第二个样式表链接，在加载时，将使用前一个样式表。但是，您的解决方案更好。如果第二个样式表缺少第一个样式表的任何内容，那么您将得到一个混合的css文件，我不喜欢这个想法。我有同样的案例，我不想使用10个主题，我不确定每个人都会使用它。告诉我为什么我的应用程序必须额外加载1兆字节？我想一定有办法。这种方法使我的项目简单多了。非常感谢。我忽略了一些非常明显的东西。是否有可能避免页面加载时暂时缺少主题？@Josep Sayol最好用角度来回答！干得好，兄弟！快速、简单、高效，我将重命名并添加几行。 
    <body class="cerulean">
<body class="cosmo">
<body class="yeti">

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

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

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

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

    <link rel="stylesheet" ng-href="/external/bootstrap/css/bootstrap_{{myTheme}}.min.css">

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