1

I basically have a JSON file with from which im building some blocks. One of the properties of the JSON is a background-image path for a div.

Something along the lines of:

[
  ..
  {
    ..
    ..
    "smallimg": "../assets/images/dummy/dummy-intro-1.jpg",
    ..

]

Then once on my page, i have something like:

<div class="fact-img" style="{{facts.smallimg}}" ...

I had background-image as part of my JSON string, that didnt work, the one above doesnt work either even placing the background-image declaration just before it.

For some reason it seems as ANYTHING i place inside the style tag is not being recognized by IE ( im using IE10 / IE9 ).

Also, i place my {{facts.smallimg}} anywhere else outside of the style tag, it shows up fine. Its only when its placed inside the style tag that it doesnt render.

Btw, this is working fine on other browsers.

Any ideas why this isnt working ?

Plunker code: http://plnkr.co/edit/vXIiTc1P7QUougHJl2Cq

Please look for this part on each fact:

<div class="fact-img" style="background-image:url('../assets/images/dummy/dummy-intro-1.jpg')" data-test="background-image:url('../assets/images/dummy/dummy-intro-1.jpg')">

The part where the style="" is doesnt get rendered at all on any version of IE.

Pablo Rincon
  • 999
  • 10
  • 23
  • Can you show the part of the code where the JSON is loaded etc? Also `"../assets/images/dummy/dummy-intro-1.jpg"` is not a valid css style. – qwertynl Jan 28 '14 at 22:05
  • it is being assigned like this: $scope.facts = data[randomLoad].layout.layouts; Also, the style code was just a test, it should have the background-image rule before. – Pablo Rincon Jan 28 '14 at 22:12
  • @qwertynl code added for better reference. – Pablo Rincon Jan 28 '14 at 22:33

1 Answers1

3

Because {{facts.smallimg}} is invalid css it is trucated by IE and when the angular compiler scans all attributes, the style attribute is empty.

You can use ng-style, but it requires a object notation, and doesn't accept a string containing css rules.

<div class="fact-img" ng-style=" {backgroundImage: 'url(\'' +  fact.largeimg + '\')'} "> ...

Although the ng-style solution works, you might prefer to write a my-background-image directive or use an <img /> tag with ng-src. which would result in a cleaner template.

Bob Fanger
  • 28,949
  • 7
  • 62
  • 78
  • Could i do something like: ng-style="{{facts.smallimg}}" – Pablo Rincon Jan 28 '14 at 22:36
  • Tried your code, but the code generated is this:
    . It doesnt really read the ng-style.     – Pablo Rincon Jan 28 '14 at 22:56
  • Sorry, ng-style didn't work as i suspected, i've updated the code-snippet with the working plunker snippet. (that why it uses the fact.largeimg instead of the facts.smallimg which was a string with css rules) – Bob Fanger Jan 29 '14 at 13:11
  • Perfect thanks! Out of curiosity, why can't we simply have style="{{ fact.largeimg }} . That didn't work on Internet Explorer at all. It worked fine on other browsers. – Pablo Rincon Jan 29 '14 at 20:53
  • sorry to pop out again, but you were so helpful last time, and now im having a very similar issue, here: http://stackoverflow.com/questions/25436055/angularjs-style-issue-ie , thx in advance if you mind taking a look. – Pablo Rincon Aug 21 '14 at 21:25