i'm trying to figure out how to bind angularjs scope vars into external css file the problem i think is the curly braces here is what i'm basically trying to do:
.css_class {background:{{ angular_variable }}; color:#ffffff;}
I found a similar question here but the solution corresponds to inline css, but what if we need to externalize the template and the css properties?
I'm afraid at the moment that is not possible but last commit for angularjs added support for expresssions in style tags.
So you can do things like that:
In your controller:
$Scope.mystyles = {
.myclass: {
display: block
}
};
In your html:
<style>{{mystyles}}</style>
Take into account that it won't work in IE8 though, since it's been deprecated from 1.3.x.
how about keeping static css in external css file, and bind dynamic css using ng-style?
External css file:
.css_class {color:#ffffff;}
In your html:
<div class="css_class" ng-style="{ background: angular_variable }" ></div>
You could likely use this answer (and this jsFiddle) coupled with an AJAX request to pull the external CSS code into a variable, process it, then .append a new <script> tag into the DOM with the processed contents.
EDIT: Wow, this has been a month-long journey!
I've put together a Angular "plugin" (module+filters+factory) called ngCss that handles this and much more - check it out!
