Updating a CSS style globally with variable in scope
angularjs, angularjs-scope, css
Solution
Look at the documentation page for ngStyle. It has almost exactly what you want.
<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>
Problem
I'm currently building an app that has the option to change the theme. A theme in this instance, simply consists of changing the color of a few key elements in the app. So currently, on all elements that require the theme color, I have given them the css class `has-main-color`. In the controller, I get their desired color from the web service and set it to the scope as `$scope.mainColor = color;`. All of this works fine, but the problem I'm getting is that I can't find a suitable method of applying this color to the `has-main-color` class. Currently, I'm trying the following: ``` <style> .has-main-color { color: {{mainColor}} } </style> ``` As you could probably guess, this doesn't work so well. So what would be the best approach to solve this problem using AngularJS?