Angularjs将变量绑定到外部css文件中

Question

我正在试图找出如何将angularjs范围变量绑定到外部css文件中的问题我认为这里的花括号是我基本上想要做的事情：

.css_class {background:{{ angular_variable }}; color:#ffffff;}

我发现了一个类似的问题here，但解决方案对应于内联css，但是如果我们需要外化模板和css属性呢？

Answer 1

我现在担心这是不可能的，但最后一次对angularjs的提交增加了对样式标签中表达的支持。

所以你可以这样做：

在您的控制器中：

$Scope.mystyles = {
 .myclass: {
  display: block
 }
};

在你的HTML中：

<style>{{mystyles}}</style>

angularjs changelog

考虑到它在IE8中不起作用，因为它已经从1.3.x弃用了。

Answer 2

You could likely use this answer（and this jsFiddle）加上一个AJAX请求，将外部CSS代码拉入变量，处理它，然后.append新的<script>标记到DOM中加工内容。

编辑：哇，这是一个长达一个月的旅程！

我已经整理了一个Angular＆＃34;插件＆＃34; （模块+过滤器+工厂）called ngCss处理此问题以及更多内容 - check it out！

Answer 3

如何将静态css保存在外部css文件中，并使用ng-style绑定动态css？

外部css文件：

.css_class {color:#ffffff;}

在你的HTML中：

<div class="css_class" ng-style="{ background: angular_variable }" ></div>