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

【问题标题】：Angularjs Bind variables into external css fileAngularjs将变量绑定到外部css文件中
【发布时间】：2014-11-03 09:19:25
【问题描述】：

我正在尝试弄清楚如何将 angularjs 范围变量绑定到外部 css 文件中，我认为这里的花括号是我基本上想要做的：

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

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

【问题讨论】：

【解决方案1】：

恐怕目前这是不可能的，但 angularjs 的最后一次提交增加了对样式标签中表达式的支持。

所以你可以这样做：

在您的控制器中：

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

在您的 html 中：

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

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

【讨论】：

【解决方案2】：

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

外部css文件：

.css_class {color:#ffffff;}

在您的 html 中：

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

【讨论】：

【解决方案3】：

You could likely use this answer (and this jsFiddle) 加上一个 AJAX 请求，将外部 CSS 代码拉入一个变量，对其进行处理，然后将 .append 一个新的 <script> 标记与处理后的内容一起放入 DOM。

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

我已经组装了一个 Angular “插件”（模块+过滤器+工厂）called ngCss 来处理这个以及更多 - check it out！

【讨论】：