AngularJS - ng-Stil nicht css Hintergrund Eigenschaft nicht aktualisiert

Question

ich eine Dienstleistung, die Bild-URL zurückgibt, und es wird mit dem folgenden Code aufgerufen:

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

auf meiner Sicht habe ich mit ng ein Bild haben -src Attribut, das perfekt wie so gearbeitet:

<img ng-src="{{item.img}}"> 

Dann anstelle Hintergrund-Bild auf einem SPAN zu verwenden, habe ich mich entschlossen hat:

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

funktioniert nun der Fluss nur auf dem ersten Lauf, nach, dass ich sehen kann (in der Konsole) die folgende 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> 

, die anzeigt, dass die Variable aktualisiert, aber die HTML-Datei auf seinen ursprünglichen Zustand noch.

Ich habe versucht, apply/digest auf post Erfolg, aber bekam einen Fehler $ Digest bereits in Bearbeitung (die Sinn machen). Das Problem ist, dass nach einem normalen Digest (zum Beispiel bei anderen Änderungen) der Stil angewendet wird und ich das richtige Bild sehe.

Was fehlt mir hier?

Update: Ich habe ein JS fiddle erstellt, das dieses Problem demonstriert ... sieht aus wie ein Fehler in dem Winkel mir.

Answer 1

Ich lief auch in diesem. Anstatt mit {{ }} zu bewerten, verwenden Sie Zeichenfolge + Wert Verkettung.

Dies funktioniert:

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

Hier ist eine Arbeitsversion Ihres fiddle

Answer 2

Wo Sie gerade Ihren Umfang Variable aktualisieren, wickeln diese in einem $timeout Aufruf, das Updates für Ihren Anwendungsbereich drücken und anschließend die Ansicht, dies wird das Update auf die nächsten digest effektiv stößt die Digest bereits im Gang die Vermeidung von Konflikten :

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

This question thread können Sie einige nützliche Informationen in Bezug auf apply vs timeout etc geben

Answer 3

Es funktioniert nicht, weil die Winkel conten bewerten t der einzelnen Klammer nur einmal und nicht die Variable, die Sie innerhalb dieser Zeichenfolge binden möchten.

Sie könnten jedoch Ihre eigene Richtlinie als solche erstellen:

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

und es dann so in der Vorlage verwenden:

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

Ich habe Ihre Geige aktualisiert und es scheint gut zu funktionieren http://jsfiddle.net/dS4pB/3/

Answer 4

Sie stehen wahrscheinlich vor demselben Problem, mit dem ich kürzlich konfrontiert wurde und das mit ng-bind gelöst wurde.

Prüfung die Antwort auf diese Frage erklärt:

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

einmal habe ich ng-binden, wird meine innerHTML- richtig aktualisiert.

Answer 5

Angular 2 eine süße Art und Weise, dies zu tun hat, = "Wert"

[style *.]

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