使用范围中的变量全局更新CSS样式

我目前正在构建一个可以选择更改主题的应用程序。在本例中，主题仅包括更改应用程序中几个关键元素的颜色

因此，目前，在所有需要主题颜色的元素上，我给了它们css类

的主颜色

在控制器中，我从web服务获取它们所需的颜色，并将其设置为范围
$scope.mainColor=color

所有这些都很好，但我遇到的问题是，我找不到合适的方法将此颜色应用于
has main color
类

目前，我正在尝试以下方法：

<style>
    .has-main-color {
        color: {{mainColor}}
    }
</style>


.有主色{
颜色：{{mainColor}}
}

正如你可能猜到的，这不太好用

那么，使用AngularJS解决这个问题的最佳方法是什么呢？
我不认为您可以使用
类来实现这一点，但是请尝试一下

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

演示：
查看文档页面了解更多信息。它几乎完全符合你的要求

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




示例文本
myStyle={{myStyle}}
如果有人想使用您最初的方法，我今天遇到了同样的问题，并为style编写了一个（很小的！）指令，允许在内联样式表中使用角度表达式


允许

将bg颜色附加到适当的范围。
仅应用一次内部样式。所以动态地改变它里面的内容是没有帮助的。我对ng风格做了一些研究，结果证明这正是我需要的。谢谢你的支持assistance@Ryan，如果我从DrupalAPI接收css样式，它会工作吗？假设我有一个针对不同人群的应用程序，一个基于该用户品牌的数据库，我需要更改，css颜色，字体等。嘿，干得好！在过去的3个多月里，我一直在做同样的事情，因此可能值得一看，请参见：/。我看到您的问题是，它需要在一定范围内工作（因此，要么在HTML标记上使用
ng控制器
，要么使用串联样式）。但话说回来，你的代码是13行，而我的代码最近已经超过650行；）@deanmcpherson，简单干净！谢谢分享！找到不需要自定义指令的。
<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>

var app = angular.module('test-app', []);

app.controller('MyController', function($scope, $rootScope, $timeout){
    $scope.mainColor = 'grey';
    $scope.color = function(color) {
        $scope.mainColor = color;
    }
})

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

body { background-color: {{bgColor}}; }