AngularJS奇怪的渲染问题答案

【问题标题】：AngularJS weird render issueAngularJS奇怪的渲染问题
【发布时间】：2014-02-20 11:28:18
【问题描述】：

我基本上有一个 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')">

style="" 所在的部分在任何版本的 IE 上都不会被渲染。

【问题讨论】：

你能显示加载 JSON 等的代码部分吗？ "../assets/images/dummy/dummy-intro-1.jpg" 也不是有效的 CSS 样式。
它是这样分配的：$scope.facts = data[randomLoad].layout.layouts;另外，样式代码只是一个测试，它之前应该有 background-image 规则。
@qwertynl 代码添加以便更好地参考。

标签： javascript css angularjs

【解决方案1】：

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

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

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

虽然 ng 样式的解决方案有效，但您可能更喜欢编写 my-background-image 指令或使用带有 ng-src 的 <img /> 标签。这将产生一个更干净的模板。

【讨论】：

我可以这样做：ng-style="{{facts.smallimg}}"
试过你的代码，但生成的代码是这样的：

。它并没有真正阅读 ng 风格。
对不起，ng-style 没有像我想象的那样工作，我已经用工作的 plunker sn-p 更新了 code-sn-p。（这就是为什么它使用fact.largeimg而不是facts.smallimg，它是一个带有css规则的字符串）
非常感谢！出于好奇，为什么我们不能简单地使用 style="{{ fact.largeimg }} 。这在 Internet Explorer 上根本不起作用。它在其他浏览器上运行良好。
抱歉再次弹出，但你上次帮了大忙，现在我遇到了一个非常相似的问题，在这里：stackoverflow.com/questions/25436055/angularjs-style-issue-ie，如果你介意看一下，请提前谢谢。