将AngularJS变量绑定到CSS语法中

我试图找出如何将AngularJS范围变量绑定到CSS语法中。 我认为问题出在大括号上。 以下是我基本上想要做的：

<style>.css_class {background:{{ angular_variable }}; color:#ffffff;}</style>
<style>.css_rule {background:{{ "#000000" }}; color:#ffffff;}</style>
<style>.css_rule {background:{{ var | someFilter }}; color:#ffffff;}</style>

.css_类{background:{{angular_variable}}；color:#ffffff；}
.css_规则{背景：{{{000000}}；颜色：{ffffffff；}
.css_规则{background:{{var | someFilter}}；color:#ffffff；}

关于如何做到这一点有什么想法吗？

---

谢谢大家!

您不应该需要大括号，因为它们是在html指令中计算的-如果您有一个表达式是在它们之外计算的，那么您只需要使用大括号即可

<p ng-class="some-angular-variable">
  {{some-angular-variable}}
</p> 

---

在你的控制器里。

我不明白你为什么要用这个主意！ 你应该使用ng类

例如：

<p ng-class="{strike: strike, bold: bold, red: red}">Map Senter code hereyntax Example</p>

将Senter代码映射到hereyntax示例中

如前所述，angular不会在样式标记内的内容上运行。在那篇文章中有一个解决方案plunkr，但作为一种更灵活的方法，我只需要创建一个指令来获取内容、解析内容并替换：

最新答案 用法：

<style parse-style>.css_class {color: {{ angular_variable }};}</style>

然后：

.css_类{color:'+angular_variable+'；}

但不确定浏览器对此的支持

---

更新

我已经把一个角度“插件”（模块+过滤器+工厂）放在一起处理这个和更多-

我还制作了一个普通的Javascript（例如，没有外部依赖）版本；（）

ngCss是一个很小的*角度模块+工厂+过滤器，可以在CSS中绑定字符串和对象（包括嵌套对象）。 *缩小+压缩脚本，小于1700字节

功能：

• CSS可以是实时绑定的（对

  $scope

  的更改是

  $watch

  'ed），也可以通过自定义

  $broadcast

  事件更新CSS进行更新
• css和cssInline过滤器将Javascript/JSON

  对象

  输出为css，以启用mixin，包括嵌套

  对象

  的功能

• $scope

  可以在CSS本身中初始化，允许所有与CSS相关的信息位于*.CSS或STYLE元素中

• $scope

  可以从任何角度

  $element

  （通过

  角度.element（$element.scope（）

  ）隔离或导入

原创 多亏了@jonnynnoj的代码，我找到了一种方法，可以将

{{angular_variable}}

命名法保存在样式标记中，并实时绑定任何更改。举个简单的例子，或者看看下面我在应用程序中使用的内容：

(function (ngApp) {
    'use strict';

    //# Live bind a <style cn-styler="{ commented: true, usingSingleQuote: true }" /> tag with {{ngVars}}
    ngApp.directive('cnStyler', function () {
        return {
            //# .restrict the directive to attribute only (e.g.: <style cn-styler>...</style>)
            restrict: "A",
            link: function ($scope, $element, $attrs, controllers) {
                //# .$eval the in-line .options and setup the updateCSS function
                //#     NOTE: The expected string value of the inline options specifies a JSON/JavaScript object, hence the `|| {}` logic
                var css, regEx,
                    options = $scope.$eval($attrs["cnStyler"]) || {},
                    updateCSS = function () {
                        //# .$eval the css, replacing the results back into our $element's .html
                        $element.html($scope.$eval(css));
                    }
                ;

                //# Setup the .quote and the inverse in .unquote (which we use to process the css)
                //#     NOTE: In theory, the .unquote should not be present within the css
                options.quote = (options.usingSingleQuote !== false ? "'" : '"');
                options.unquote = (options.quote === '"' ? "'" : '"');
                regEx = new RegExp(options.unquote, "g");

                //# Process the $element's .html into css, .replace'ing any present .unquote's with .quote's (this could cause problems), then the {{Angular}} (or /*{{Angular}}*/) variables with ' + stringified_versions + '
                if (options.commented !== false) {
                    css = options.unquote + ($element.html() + '')
                        .replace(regEx, options.quote)
                        .replace(/\/\*{{/g, options.unquote + "+")
                        .replace(/}}\*\//g, "+" + options.unquote)
                    + options.unquote;
                } else {
                    css = options.unquote + ($element.html() + '')
                        .replace(regEx, options.quote)
                        .replace(/{{/g, options.unquote + "+")
                        .replace(/}}/g, "+" + options.unquote)
                    + options.unquote;
                }

                //# .$watch for any changes in the $scope, calling our updateCSS function when they occur
                $scope.$watch(updateCSS);
            }
        };
    });

})(YOUR_NG_APP_VAR_HERE);

由于像VisualStudio这样的工具中的CSS解析和自动格式化，我添加了在CSS注释中包含

{{Angular}}

变量的功能（例如

/*{{Angular}}*/

）这是指令的默认行为，除非您这样覆盖它：

<style cn-styler="{commented: false}" >...</style>

---

在一些边缘情况下，用单引号替换双引号会使CSS出错（例如在

内容

中），因此您需要确保在CSS中只使用一种引号样式（并相应地发出指令信号），以避免任何潜在问题。谢天谢地，CSS中很少使用引号，所以这基本上不是问题。

您是否检查了

ng类

。这段代码在哪里？是的，我知道ng类，但我需要操作非dom元素，如：-webkit scrollbar。。。css代码在html视图中（在控制器范围内），因为我需要使用来自外部源的颜色来操作非dom元素，如滚动条。我需要应用“未知”颜色，稍后将使用。。所以这里的课程不相关。。另外，我不能将ng类/ng样式属性应用于非dom元素，比如：-webkit scrollbarI刚刚在下面添加了这段很棒代码的主要重构。谢谢你的灵感@Campbeln这是一个正确的想法，但您可以通过使用$interpolate取消解析。事实上，我不知道为什么我一开始不使用它。见更新的回答我已经采取了这一点，并与它一起运行，结果是一个角度的“插件”（模块+过滤器+工厂），处理这个和更多-@jonnyynnoj这是一个很好的答案，有没有一种方法可以轻松地将其应用于内联脚本？例如，我尝试了console.log（{{angular_variable}}}）；但是这个返回{{angular_variable}}@jonnyynnoj如果我试图列出几个具有相同类的项目，但是需要为CSS属性之一具有不同的值，例如，背景色，这仍然有效吗？对于第一个注释，这是我的html中缺少的，样式是在控制器上面定义的。非常感谢。

<style parse-style>.css_class {color: {{ angular_variable }};}</style>

app.directive('parseStyle', function()
{
    return function(scope, elem)
    {
        elem.html(scope.$eval('\'' + elem.html() + '\''));
    };
});

<style parse-style>.css_class {color: ' + angular_variable + ';}</style>

(function (ngApp) {
    'use strict';

    //# Live bind a <style cn-styler="{ commented: true, usingSingleQuote: true }" /> tag with {{ngVars}}
    ngApp.directive('cnStyler', function () {
        return {
            //# .restrict the directive to attribute only (e.g.: <style cn-styler>...</style>)
            restrict: "A",
            link: function ($scope, $element, $attrs, controllers) {
                //# .$eval the in-line .options and setup the updateCSS function
                //#     NOTE: The expected string value of the inline options specifies a JSON/JavaScript object, hence the `|| {}` logic
                var css, regEx,
                    options = $scope.$eval($attrs["cnStyler"]) || {},
                    updateCSS = function () {
                        //# .$eval the css, replacing the results back into our $element's .html
                        $element.html($scope.$eval(css));
                    }
                ;

                //# Setup the .quote and the inverse in .unquote (which we use to process the css)
                //#     NOTE: In theory, the .unquote should not be present within the css
                options.quote = (options.usingSingleQuote !== false ? "'" : '"');
                options.unquote = (options.quote === '"' ? "'" : '"');
                regEx = new RegExp(options.unquote, "g");

                //# Process the $element's .html into css, .replace'ing any present .unquote's with .quote's (this could cause problems), then the {{Angular}} (or /*{{Angular}}*/) variables with ' + stringified_versions + '
                if (options.commented !== false) {
                    css = options.unquote + ($element.html() + '')
                        .replace(regEx, options.quote)
                        .replace(/\/\*{{/g, options.unquote + "+")
                        .replace(/}}\*\//g, "+" + options.unquote)
                    + options.unquote;
                } else {
                    css = options.unquote + ($element.html() + '')
                        .replace(regEx, options.quote)
                        .replace(/{{/g, options.unquote + "+")
                        .replace(/}}/g, "+" + options.unquote)
                    + options.unquote;
                }

                //# .$watch for any changes in the $scope, calling our updateCSS function when they occur
                $scope.$watch(updateCSS);
            }
        };
    });

})(YOUR_NG_APP_VAR_HERE);

<style cn-styler type="text/css">
    .myClass{
        color: /*{{themeColor}}*/;
    }
</style>

<html ng-app="YOUR_NG_APP_VAR_HERE" ng-controller="MyNgController">

<style cn-styler="{commented: false}" >...</style>

<style cn-styler="{usingSingleQuote: false}" >...</style>