当前位置: 首页 > 面试题库 >

将AngularJS变量绑定到CSS语法中

司徒胤
2023-03-14
问题内容

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

关于如何实现这一目标的任何想法?谢谢!


问题答案:

如此处所述,
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/



 类似资料:
  • 我有一个返回列表的函数。我试图在drools when子句中调用此函数,并将其绑定到名为l1的变量。如果像这样绑定变量,则子句不会执行。然而,如果我以类似的方式绑定映射,则执行then子句中的语句。我正在使用最新版本的drools。 这是代码 这里规则'test1'执行并打印值。但是我没有看到规则'test2'的任何输出。 任何帮助都将不胜感激。

  • 问题内容: 我正在尝试将输入字段的值绑定到变量。我不知道这个变量的名字 是先验的 ;它存储在另一个变量中。 这是html: 这是控制器: 我也 弄了个小提琴。 这是行不通的,因为当前绑定是在输入字段和变量之间。相反,我将输入字段绑定到变量,该变量的名称存储在变量中(在本例中为)。 可能吗? 怎么样? 问题答案: 是的,有可能。我不明白您为什么要这样做,但是我可以告诉您如何做。我无法启动小提琴,但是

  • 问题内容: 我的控制器中有一些函数可以调用一些数据库函数。所有这些数据库函数都执行“错误回调”,这意味着如果发生数据库错误,它们将执行一个单独的回调来处理该错误。例: 我有与此相似的多个函数,它们正在调用不同的数据库函数。问题是我目前已将onError()复制到每个函数的作用域中,因为在处理错误时我需要req和res变量。我当然可以将res和req传递给数据库函数,然后将它们作为参数传递给错误回调

  • Rust 通过静态类型确保类型安全。变量绑定可以在声明变量时标注类型。不过在多数情况下,编译器能够 从字面内容推导出变量的类型,大大减少了标注类型的负担。 使用 let 绑定操作可以将值(像具体数据)绑定到变量中。 fn main() { let an_integer = 1u32; let a_boolean = true; let unit = (); // 将

  • 变量绑定默认是不可变的,但加上 mut 修饰语后变量就可以改变。 fn main() { let _immutable_binding = 1; let mut mutable_binding = 1; println!("Before mutation: {}", mutable_binding); // 正确代码 mutable_binding += 1

  • 事实上每一个非“Hello World” Rust 程序都用了变量绑定。他们将一些值绑定到一个名字上,这样可以在之后使用他们。let被用来声明一个绑定,像这样: fn main() { let x = 5; } 在每个例子中都写上fn main() {有点冗长,所以之后我们将省略它。如果你是一路看过来的,确保你写了main()函数,而不是省略不写。否则,你将得到一个错误。 模式(Patt