current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite
1

I have one 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?

Thanks

share|improve this question
    
Doesn't your eventInfo.eventHeaderImg variable in current $scope hold 'eventInfo.eventHeaderImg' value? –  blint 2 days ago
    
It works for me: jsfiddle.net/ExpertSystem/zEtT9 –  ExpertSystem 2 days ago
    
yes, when I print {{eventInfo.eventHeaderImg}} in html I get correct value. –  Djomla 2 days ago
    
@Djomla: In the fiddle provided above, I use {{eventInfo.eventHeaderImg}} in the style attribute as an argument to url (the exact same thing you do in your question). And it works fine. I think there was a bug with the style attribute in earlier versions of Angular. What version are you using ? –  ExpertSystem 2 days ago
    
Should be 1.2... –  Djomla 2 days ago
show 1 more comment

3 Answers

up vote 0 down vote

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>
share|improve this answer
    
Hmm Im not sure why it's not working in my case. I have correct value in variable, but it's no rendering. –  Djomla 2 days ago
    
ng-style="{background: transparent 'url({{eventInfo.eventHeaderImg}})' top center no-repeat;}" I got this error "Error: [$parse:syntax] Syntax Error: Token ''url(/8330.png?547933175)'' is unexpected, expecting [}] at column 27 of the expression" –  Djomla 2 days ago
    
try this: ng-style="{background: 'transparent url({{eventInfo.eventHeaderImg}}) top center no-repeat'}" the whole expression should be inside single quotes. –  Ilan Frumer 2 days ago
    
Still same.. Im getting something like this stackoverflow.com/questions/23272145/… –  Djomla 2 days ago
    
There is not reason to use ngStyle. See my comment under the question. If you are using interpolation ({{}}) it should be working with style. Unless you use an older version of Angular. –  ExpertSystem 2 days ago
add comment
up vote 0 down vote

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.

share|improve this answer
add comment
up vote -1 down vote

You don't need to use double curl brackets there.

share|improve this answer
    
Actually if you don't like to use ng-class and without the curly brackets you could use the approach explained here stackoverflow.com/questions/18248437/… –  Javi Muñoz Tous 2 days ago
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.