我有一个返回图像URL的服务,并且使用以下代码进行调用:
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属性的图像,它的工作原理非常像这样:
<img ng-src="{{item.img}}">
然后,我决定在SPAN上使用背景图片:
<span ng-style="{'background':'transparent url({{item.img}})'}"></span>
现在该流程仅在第一次运行时有效,之后我可以在控制台中看到以下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仍处于其初始状态。
我尝试在成功发布后致电apply / digest,但已经遇到了错误 $ digest(正在进行中) (有意义)。有趣的是,在进行常规摘要(例如,对其他ui进行更改)之后,将应用样式,并且我看到了正确的图像。
我在这里想念什么?
更新: 我创建了一个 JS小提琴 来演示此问题……对我而言似乎像是一个有角度的错误。
我也遇到了这个问题。而不是使用进行求{{ }}值,而是使用字符串+值串联。
{{ }}
这将起作用:
<span ng-style="{'background':'transparent url(' + item.img + ')'}"></span>)
这是您的 提琴 的工作版本 ****