16

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!

4

4 回答 4

24

正如这里所解释的，角度不会在样式标签内的内容上运行。在那篇文章中有一个解决方法 plunkr 但作为一种更灵活的方法，我只需创建一个指令来获取内容，解析它们并替换：

更新的答案

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>

虽然不确定浏览器对此的支持。

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

于 2013-08-15T09:01:00.280 回答
3

更新

我已经组合了一个名为 ngCss的 Angular “插件”（模块+过滤器+工厂） ，它可以处理这个以及更多问题 -看看吧！

我也制作了 Vanilla Javascript（例如，没有外部依赖项）版本；CjsSS.js（GitHub）。

ngCss是一个微小的* Angular Module+Factory+Filters，可以在 CSS 中绑定字符串和对象（包括嵌套对象）。*1,700 字节以下的缩小+压缩脚本

特征：

  • CSS 可以是实时绑定的（更改$scope是$watch'ed）或通过自定义$broadcast事件 updateCss 更新。
  • css 和 cssInline 过滤器将 Javascript/JSON 输出objects为 CSS 以启用混合，包括嵌套的能力objects。
  • $scope可以在 CSS 本身内初始化，允许所有与 CSS 相关的信息位于 *.css 或 STYLE 元素中。
  • $scope可以从任何 Angular 中隔离或导入$element（通过angular.element($element).scope()）。

原创 感谢@jonnyynnoj 的代码，我找到了一种将{{angular_variable}}命名法保留在样式标签内以及实时绑定任何更改的方法。查看@jonnyynnoj 代码的fork 以获得一个简单的示例，或者看看下面我在我的应用程序中使用的内容：

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

您在控制器中设置$scope.themeColor的某个位置并已替换YOUR_NG_APP_VAR_HERE为ngApp变量。

笔记：

确保您在标签的ng-controller范围内定义了<style>标签，因为<style>标签应该在<head>通常ng-controller在<body>标签上或下面定义的时候。TL;DR：像这样把你的标签放在ng-controller你的标签上<html>：

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

由于Visual Studio等工具中的 CSS 解析和自动格式化，我添加了{{Angular}}在 CSS 注释中包含变量的功能（例如/*{{Angular}}*/）。这是指令的默认行为，除非您像这样覆盖它：

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

由于此解决方案的性质（CSS 被.$eval视为其中插入变量的字符串），还需要处理 CSS 中单引号或双引号的存在。默认情况下，该指令假定您在 CSS 中使用单引号 (')，这意味着为了避免任何引入的错误，您应该只在 CSS 中使用单引号，因为 CSS中存在的任何双引号都将被单引号替换。您可以像这样覆盖此默认行为（意味着您在 CSS 中使用双引号）：

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

在某些极端情况下，用单引号替换双引号会破坏 CSS（例如 in content），因此您需要确保在 CSS 中仅使用一种样式的引号（并相应地发出指令）以避免任何潜在的问题。谢天谢地，CSS 中很少使用引号，所以这基本上不是问题。

于 2014-10-03T02:27:45.270 回答
0

你不应该需要花括号，因为它们是在 html 指令内评估的——如果你有一个在它们之外评估的表达式，你只需要使用花括号；

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

在您的情况下，删除双花括号并使用双引号应该可以解决问题。

顺便说一句，Chandermani 正在赚钱——你想要做的事情最好用 ng-class 指令来完成。使用它将允许将一个（或多个）类应用于相应的标签。

IE;

<p ng-class="mystyle">
    some text
</p>

假设你有两个类 style1 和 style2

您可以选择要申请的任何一个

scope.mystyle = "style1" // or whatever

在您的控制器中。

于 2013-08-15T08:22:20.207 回答
0

我不明白你为什么要使用这个想法！你应该为此使用 ng-class ！

例如：

<p ng-class="{strike: strike, bold: bold, red: red}">Map Senter code hereyntax Example</p>
于 2013-08-15T08:26:55.213 回答