Html AngularJS - 内联 css 样式渲染
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23289206/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS - inline css style rendering
提问by Djomla
Is it possible / and how / to write inline css style using angular variables?
是否有可能/以及如何/使用角度变量编写内联 css 样式？
<div style="background: transparent url({{eventInfo.eventHeaderImg}}) top center no-repeat;"></div>
This is my output
这是我的输出
"NetworkError: 404 Not Found - http://test/eventInfo.eventHeaderImg"
So I see it didn't render this value.
所以我看到它没有呈现这个值。
I know it's possible to change this in controller, but is it doable with my approach?
我知道可以在控制器中更改此设置，但是我的方法可行吗？
回答by Ilan Frumer
You should use ngStyle:
你应该使用ngStyle：
an example: http://plnkr.co/edit/qT8skZzTwXjrh3Ye5mr9?p=preview
一个例子：http: //plnkr.co/edit/qT8skZzTwXjrh3Ye5mr9?p=preview
<div ng-style="{ background: 'transparent url({{ eventInfo.eventHeaderImg }}) top center no-repeat' }"></div>
回答by Backer
This worked for my:
这对我有用：
<div ng-style="{ 'background': 'transparent url(' + eventInfo.eventHeaderImg + ') top center no-repeat' }"></div>
回答by ngasull
You're "writing" a wrong url in your style, that's why you've got a 404(not found) error.
你在你的风格中“写”了一个错误的网址，这就是为什么你有一个404（未找到）错误。
According to this plunker, if you're $scopeis well set up, you print the right data in styleattribute.
根据这个 plunker，如果你$scope设置得很好，你可以在style属性中打印正确的数据。
Note that your eventInfoscope variable has to be a map/object.
请注意，您的eventInfo范围变量必须是地图/对象。
回答by Javi Mu?oz Tous
You don't need to use double curl brackets there.
您不需要在那里使用双花括号。
