我目前正在构建一个可以选择更改主题的应用。在这种情况下，主题仅由更改应用中几个关键元素的颜色组成。
所以目前，在所有需要主题颜色的元素上，我都为它们提供了 css 类 has-main-color。
在控制器中，我从 Web 服务获取所需的颜色并将其设置为$scope.mainColor = color; 的范围。
所有这些都可以正常工作，但我遇到的问题是我找不到将这种颜色应用于has-main-color 类的合适方法。
目前，我正在尝试以下方法：
<style>
.has-main-color {
color: {{mainColor}}
}
</style>
正如您可能猜到的那样，这不太好用。
那么使用 AngularJS 解决这个问题的最佳方法是什么？
【问题讨论】：
标签： css angularjs angularjs-scope
查看ngStyle 的文档页面。它几乎完全符合您的要求。
<input type="button" value="set" ng-click="myStyle={color:'red'}">
<input type="button" value="clear" ng-click="myStyle={}">
<br/>
<span ng-style="myStyle">Sample Text</span>
<pre>myStyle={{myStyle}}</pre>
【讨论】：
我认为您不能使用 class 来执行此操作，但请尝试此操作
<div ng-app="test-app" ng-controller="MyController" theme-wrapper="{{mainColor}}">
<div class="has-main-color">Top1</div>
<div>Child 1</div>
<div class="has-main-color">Top1</div>
<div>Child 1</div>
<div class="has-main-color">Top1</div>
<div>Child 1</div>
<br />
<input type="button" value="Red" ng-click="color('red')" />
<input type="button" value="Green" ng-click="color('green')" />
<input type="button" value="Blue" ng-click="color('blue')" />
</div>
JS
var app = angular.module('test-app', []);
app.controller('MyController', function($scope, $rootScope, $timeout){
$scope.mainColor = 'grey';
$scope.color = function(color) {
$scope.mainColor = color;
}
});
app.directive('themeWrapper', function(){
var counter = 0, regex = /^theme-wrapper-\d+$/;
return {
restrict: 'A',
link: function(scope, elm, attrs){
attrs.$observe('themeWrapper', function(value){
var className = 'theme-wrapper-' + (counter++);
$('<style>.' + className + ' .has-main-color{color: ' + value + ';}</style>').appendTo('head');
var classes = elm.attr('class').split(' ');
angular.forEach(classes, function(v, i){
if(regex.test(v)) {
elm.removeClass(v);
}
});
elm.addClass(className);
});
}
}
});
演示：Fiddle
另一个简单的解决方法
<div ng-app="test-app" ng-controller="MyController">
<div style="color: {{mainColor}}">Top1</div>
<div>Child 1</div>
<div style="color: {{mainColor}}">Top1</div>
<div>Child 1</div>
<div style="color: {{mainColor}}">Top1</div>
<div>Child 1</div>
<br />
<input type="button" value="Red" ng-click="color('red')" />
<input type="button" value="Green" ng-click="color('green')" />
<input type="button" value="Blue" ng-click="color('blue')" />
</div>
JS
var app = angular.module('test-app', []);
app.controller('MyController', function($scope, $rootScope, $timeout){
$scope.mainColor = 'grey';
$scope.color = function(color) {
$scope.mainColor = color;
}
})
演示：Fiddle
【讨论】：
如果有人想使用您的原始方法，我今天遇到了同样的问题，并为样式编写了一个（很小的！）指令，它允许内联样式表中的角度表达式。
https://github.com/deanmcpherson/angular-inline-style
允许
body { background-color: {{bgColor}}; }
将背景颜色附加到适当的范围。
【讨论】：