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 来演示这个问题......对我来说看起来像是一个有角度的错误。

Answer 1

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

这将起作用：

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

这是您的fiddle 的工作版本

Answer 2

它不起作用，因为 angular 只对单个括号的内容进行一次评估，并且没有找到要在该字符串中绑定的变量。

但是，您可以像这样创建自己的指令：

app.directive('backImg', function(){
    return function(scope, element, attrs){
        attrs.$observe('backImg', function(value) {
            element.css({
                'background': 'transparent url(' + value +')'
            });
        });
    };
});

然后像这样在你的模板中使用它：

<div ng-if="vis" class="container" back-img="{{imgSrc}}"></div>

我已经更新了你的小提琴，它似乎工作正常http://jsfiddle.net/dS4pB/3/

Answer 3

如果您当前正在更新您的范围变量，请将其包装在 $timeout 调用中以将更新推送到您的范围和随后您的视图，这将有效地将更新推送到下一个 digest 避免 摘要已经在进行中冲突：

    $timeout(function(){
        $scope.var = value;
    });

This question thread 可能会给你一些关于apply 与timeout 等的有用信息

Answer 4

您可能面临我最近遇到的相同问题并使用 ng-bind 解决了。

检查这个问题中解释的答案：

AngularJS : Why ng-bind is better than {{}} in angular?

使用 ng-bind 后，我的 innerhtml 已正确更新。

Answer 5

Angular 2 有一个很好的方法，[style.*]="value"

<span [style.background-color]="transparent" [style.background-image]="item.img"></span>