Question

我正在试图弄清楚如何将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>

有关如何实现这一目标的任何想法？谢谢！

Answer 1

正如解释here angular不会在样式标记内的内容上运行。该帖子中有一个变通方法，但作为一种更灵活的方法，我只需要创建一个抓取内容的指令，解析它们并替换它们：

更新回答

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/

Answer 2

<强>更新

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

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

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

功能


CSS可以是活动的（$scope中的更改为$watch'）或通过自定义$broadcast事件updateCss进行更新。

css和cssInline过滤器输出Javascript / JSON objects作为CSS以启用mixins，包括嵌套objects的能力。

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

$scope可以从任何角度$element中隔离或导入（通过angular.element($element).scope()）。

<强>原始感谢@ jonnyynnoj的代码，我找到了一种方法，可以在样式标记中保留{{angular_variable}}命名，以及实时绑定任何更改。 Check out the fork of @jonnyynnoj's code只是一个简单的例子，或者看看我在我的应用中使用的内容：

(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> ng-controller标记或以下标记。 TL; DR：将<html>放在<html ng-app="YOUR_NG_APP_VAR_HERE" ng-controller="MyNgController">标记上，如下所示：

{{Angular}}

由于CSS解析和 Visual Studio 等工具中的自动格式化，我添加了该功能，以便在CSS注释中包含/*{{Angular}}*/个vars（例如<style cn-styler="{commented: false}" >...</style>）。 这是指令的默认行为，除非你像这样覆盖它：

.$eval

由于此解决方案的性质（CSS <style cn-styler="{usingSingleQuote: false}" >...</style>作为插入变量的字符串），CSS中还需要处理单引号或双引号。默认情况下，该指令假设您在CSS中使用单引号（'），这意味着为了避免任何引入的错误您应该只使用CSS中的单引号，因为CSS中存在任何双引号将被单引号替换。您可以覆盖此默认行为（意味着您在CSS中使用双引号），如下所示：

content

有一些边缘情况，用单引号替换双引号会搞砸CSS（例如在{{1}}中），因此您需要确保在CSS中仅使用一种引号样式（并相应地发出指示信号）以避免任何潜在的问题。值得庆幸的是，CSS很少使用引号，所以这主要是一个非问题。

Answer 3

你不应该需要花括号，因为这些是在html指令中进行评估的 - 如果你有一个在它们之外进行评估的表达式，你只需要使用花括号即可;

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

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

顺便说一句，Chandermani是有钱的 - 你正在尝试用ng-class指令更好地完成。使用它将允许将一个（或几个）类应用于相应的标记。

即;

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

说你有两个类style1和style2

您可以选择要应用的任何一个

scope.mystyle = "style1" // or whatever

在您的控制器中。

Answer 4

我无法理解为什么你要使用这个想法！你应该使用ng-class！

例如：

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

将AngularJS变量绑定到CSS语法中

4 个答案:

更新回答

原始答案