AngularJS - 吴式不更新CSS背景属性 [英] AngularJS - ng-style does not update css background property

问题描述

我有一个返回图片网址服务，它使用的是以下code名为：

I have a service that returns image URL, and it is called using the following code:

angular.forEach(results, function (item) {
     item.img = "/images/searchItem.jpg";
     $http.post("https://my.api.com/?id=" + item.id).success(
           function (url) {
               item.img = url;
           });
});

这是我的看法我曾经有NG-src属性的图像，这完美地工作，像这样：

on my view I used to have an image with ng-src attribute, that worked perfectly like so:

<img  ng-src="{{item.img}}">

于是我决定在SPAN而是使用背景图片：

Then I've decided to use background-image on a SPAN instead:

<span ng-style="{'background':'transparent url({{item.img}})'}"></span>

现在流量仅在第一次运行之后，我可以看到（在控制台）以下的HTML

now the flow works only on the first run, after that I can see (in the console) the following html

<span ng-style="{'background':'transparent url(http://expertsimages.liveperson.com/images/rating/rate10.gif)'}" style="background-image: url(https://fb.lp-chat.com/images/searchItem.jpg); background-color: transparent; background-position: initial initial; background-repeat: initial initial;"></span>

这表明变量更新，但是在html仍然在它的初始状态。

which indicates that the variable updated, however the html is still on its initial state.

我试着打电话申请/消化后上的成功，却得到了一个错误的 $消化正在进行中（其中有意义）。该strage的是，（例如在其它UI变化）被应用后的正常消化风格，我看到正确的图像。

I tried to call apply/digest on post success, but got an error $digest already in progress (which make sense). The strage thing is that after a normal digest (for example on other ui changes) the style is being applied and I see the right image.

我是什么在这里失踪？

更新：
我创建了一个 JS提琴 演示了这个问题......貌似角一个bug我的。

Update: I've created a JS fiddle that demonstrates this issue...looks like a bug in angular to me.

推荐答案

我碰到了这一点。相反，与评估 {{}} ，使用字符串+值串联。

I ran into this as well. Instead of evaluating with {{ }}, use string + value concatenation.

这将工作：

＆LT;跨度NG风格={'背景'：'透明URL（'+​​ item.img +'）'}＆GT;＆LT; / SPAN＆GT;）

这是你的的工作版本的小提琴

这篇关于AngularJS - 吴式不更新CSS背景属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！