将 AngularJS 变量绑定到 CSS 语法中 [英] Bind AngularJS variables into CSS syntax

问题描述

我想弄清楚如何将 AngularJS 范围变量绑定到 CSS 语法中.我认为问题出在花括号上.这是我主要尝试做的:

I'm trying to figure out how to bind AngularJS scope vars into CSS syntax. I think that the problem is in the curly braces. Here is what I'm basically trying to do:

<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>

关于如何实现这一点的任何想法?谢谢！

Any ideas on how this could be accomplished? Thank you!

推荐答案

如解释 here angular 不会在样式标签内的内容上运行.在那篇文章中有一个解决方法 plunkr 但作为一种更灵活的方法，我只是创建一个指令来获取内容，解析它们并替换:

As explained here angular doesn't run on content inside style tags. There's a workaround plunkr in that post but as a more flexible approach I'd just create a directive that grabs the contents, parses them and replaces:

app.directive('parseStyle', function($interpolate) {
    return function(scope, elem) {
        var exp = $interpolate(elem.html()),
            watchFunc = function () { return exp(scope); };

        scope.$watch(watchFunc, function (html) {
            elem.html(html);
        });
    };
});

用法:

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

http://jsfiddle.net/VUeGG/31/

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

然后:

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

不确定浏览器是否支持此功能.

Not sure about the browser support for this though.

http://jsfiddle.net/VUeGG/4/

这篇关于将 AngularJS 变量绑定到 CSS 语法中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！