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正在进行中(这是有意义的).很明显,在正常摘要之后(例如在其他ui更改上),正在应用样式,我看到了正确的图像.

我在这里错过了什么？

更新: 我已经创建了一个JS小提琴,演示了这个问题......看起来像是一个有角度的错误.

Answer 1

我也碰到了这个.而不是使用{{ }},使用字符串+值连接.

这将有效:

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

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

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;
    });

这个问题主题可能会给你一些有关applyvstimeout等的有用信息