AngularJS奇怪的渲染问题 [英] AngularJS weird render issue

问题描述

我基本上有从即时通讯建设一些块一个JSON文件。
其中一个JSON的性质是一个div背景图像的路径。

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.

线沿线的东西：

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

]

然后我的网页上一次，我碰到这样的：

Then once on my page, i have something like:

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

我有背景图像作为我的JSON字符串，没有工作，一个以上不工作的一部分，或者即使放置背景图片声明之前它。

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.

有关某种原因，它似乎什么，我把风格标签内未通过IE浏览器（使用IE10 / IE9 IM）的认可。

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

另外，我把我的{{facts.smallimg}}样式标记以外其他地方，它显示了罚款。它只有当它置于​​风格标记，它不渲染里面。

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

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

部分，其中的风格=是犯规得到根本上呈现的IE浏览器的任何版本。

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

推荐答案

由于 {{} facts.smallimg} 是无效的CSS它是由IE trucated当角编译器会扫描所有属性，样式属性是空的。

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

您可以使用 NG式，但它需要一个对象的符号，并且不接受一个字符串包含CSS规则。

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 + '\')'} "> ...

虽然NG式的解决方案有效，则可能preFER写了我的背景图像指令，或使用＆LT; IMG /＆gt;在 NG-SRC 标记。这会导致更清洁的模板

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.

这篇关于AngularJS奇怪的渲染问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！