AngularJS - inline css style rendering

Question

Is it possible / and how / to write inline css style using angular variables?

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

Answer 1

You should use ngStyle :

an example: http://plnkr.co/edit/qT8skZzTwXjrh3Ye5mr9?p=preview

<div ng-style="{ background: 'transparent url({{ eventInfo.eventHeaderImg }}) top center no-repeat' }"></div> 

Answer 2

这对我有用：

<div ng-style="{ 'background': 'transparent url(' + eventInfo.eventHeaderImg + ') top center no-repeat' }"></div>

Answer 3

You're "writing" a wrong url in your style, that's why you've got a 404 (not found) error.

According to this plunker , if you're $scope is well set up, you print the right data in style attribute.

Note that your eventInfo scope variable has to be a map/object.

Answer 4

您不需要在那里使用双卷曲支架。