javascript - 哪个是Angular JS自定义主题更改的最佳实践方法？ - Thinbug

哪个是Angular JS自定义主题更改的最佳实践方法？

时间：2017-04-12 11:56:05

标签： javascript angularjs

Method 1:

<link rel="stylesheet" ng-href=“cls-{{theme}}.css">
$scope.theme='normal';
$scope.themes = [{name:'red',url: 'red'},{ name:‘green’,url:‘green’}];

Method 2:
$scope.theme='red';
$scope.col=['red','green'];    
$scope.colorchange = function(a)
{
  $scope.theme=$scope.col[a];
}
<div class="cls-{{theme}}"></div>

请建议我哪个是定制主题更改概念的最佳方法并给我解释

1 个答案:

答案 0 :(得分：0)

方法

为每个主题创建一个单独的css文件。

default.css

  body.default{
       .box{
          background: #000;
          color: #fff;
       }
  }

red.css

  body.red{
       .box{
          background: #f00;
          color: #fff;
       }
  }

green.css

  body.red{
       .box{
          background: #0f0;
          color: #fff;
       }
  }

在主页面中加载所有主题（css文件）。如果可能的话，异步加载css文件除默认主题 - refer for async css
```
 <link rel="stylesheet" href="default.css">
 <link rel="stylesheet" href="red.css">
 <link rel="stylesheet" href="green.css">
```

当用户更改主题时，只需更改body标签的类名，所以想法只是更改根元素类以反映所选主题。

<body ng-class="{{theme_classname}}">

$scope.theme="default";
$scope.colorChange = function(a)
{
   $scope.theme_classname=$scope.col[a];
}