AngularJS – ng样式不会更新CSS背景属性

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

angular.forEach(results, function (item) { item.img = "http://img.dovov.comsearchItem.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> 

现在这个stream程只能在第一次运行，之后我可以看到（在控制台中）下面的html

 <span ng-style="{'background':'transparent url(http://expertsimages.liveperson.comhttp://img.dovov.comrating/rate10.gif)'}" style="background-image: url(https://fb.lp-chat.comhttp://img.dovov.comsearchItem.jpg); background-color: transparent; background-position: initial initial; background-repeat: initial initial;"></span> 

这表示variables已经更新，但是html仍然处于初始状态。

我试图打电话申请/消化成功，但得到了一个错误$摘要已经在进行 （这是有道理的）。 平常的事情是，经过一个正常的摘要（例如在其他用户界面的变化）风格正在应用，我看到正确的形象。

我在这里错过了什么？

更新：我已经创build了一个JS小提琴演示这个问题…看起来像一个错误angular度给我。

Answer 1

我也遇到了这个。 而不是用{{ }}进行评估，请使用string+值连接。

这将工作：

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

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

Answer 2

它不起作用，因为angular度评估一个括号的内容只有一次，并没有find你想要绑定在该string内的variables。

你可以创build你自己的指令：

 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

在你正在更新你的范围variables的地方，在$timeout调用中包装这个更新到你的范围，然后你的视图，这将有效地更新到下一个digest避免摘要已经在进行冲突：

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

这个问题的线程可能会给你一些关于apply与timeout等有用的信息

Answer 4

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

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

AngularJS：为什么ng-bind在angular度上比{{}}好？

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

Answer 5

Angular 2有一个很好的做法，[style。*] =“value”

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