Question

我有一个返回图片网址的服务，并使用以下代码调用它：

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 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 vs timeout等的有用信息

Answer 4

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

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

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

一旦我使用了ng-bind，我的innerhtml就被正确更新了。

Answer 5

Angular 2有一种甜蜜的方式，[风格。*] =＆＃34;价值＆＃34;

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

AngularJS - ng-style不更新css后台属性

5 个答案: