javascript - AngularJS - ng-style 不更新 css 背景属性

Question

我有一个返回图像 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 already in progress(这是有道理的)。奇怪的是，在正常摘要后(例如在其他 ui 更改上)正在应用样式，我看到了正确的图像。

我在这里错过了什么？

更新:我创建了一个 JS fiddle这证明了这个问题......对我来说看起来像是一个 Angular 错误。

Answer 1

我也遇到过这个问题。而不是使用 {{ }} 进行评估, 使用字符串 + 值连接。

这会起作用:

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

这是您的 fiddle 的工作版本