Question

我基本上有一个JSON文件，我可以从中构建一些块。 JSON的一个属性是div的背景图像路径。

有些事情：

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

]

然后在我的页面上，我有类似的东西：

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

我有背景图像作为我的JSON字符串的一部分，它没有用，上面的那个甚至不能在它之前放置背景图像声明。

出于某种原因，似乎我在风格标签内的任何内容都没有被IE识别（我使用的是IE10 / IE9）。

此外，我将{{facts.smallimg}}放置在样式标记之外的任何其他位置，它显示正常。只有当它放在样式标签内时它才会呈现。

顺便说一句，这在其他浏览器上运行良好。

为什么这不起作用的任何想法？

Plunker代码：http://plnkr.co/edit/vXIiTc1P7QUougHJl2Cq

请在每个事实上查找此部分：

<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')">

在任何版本的IE上，style =“”的部分都不会被渲染。

Answer 1

因为{{facts.smallimg}}是无效的css，它被IE统治，当角度编译器扫描所有属性时，style属性为空。

您可以使用ng-style，但它需要对象表示法，并且不接受包含css规则的字符串。

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

虽然ng-style解决方案有效，但您可能更喜欢编写my-background-image指令或使用<img />标记ng-src。这将导致更清晰的模板。

AngularJS奇怪的渲染问题

1 个答案: