Domanda AngularJS - ng-style non aggiorna la proprietà di background css


Dispongo di un servizio che restituisce l'URL dell'immagine e viene chiamato utilizzando il seguente codice:

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

a mio avviso avevo un'immagine con attributo ng-src, che funzionava perfettamente in questo modo:

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

Quindi ho deciso di utilizzare l'immagine di sfondo su una SPAN, invece:

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

ora il flusso funziona solo alla prima esecuzione, dopo di che posso vedere (nella console) il seguente 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>

che indica che la variabile è stata aggiornata, tuttavia l'html è ancora allo stato iniziale.

Ho provato a chiamare apply / digest sul post di successo, ma ho ricevuto un errore $ digest già in corso (che ha senso). La cosa strage è che dopo un normale riassunto (per esempio su altre modifiche di ui) lo stile viene applicato e vedo l'immagine giusta.

Cosa mi manca qui?

Aggiornare: Ho creato un JS violino questo dimostra questo problema ... sembra un insetto angoloso per me.


44
2018-04-27 14:21


origine


risposte:


Mi sono imbattuto anche in questo. Invece di valutare con {{ }}, usa la concatenazione string + value.

Questo funzionerà:

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

Ecco una versione funzionante del tuo violino


80
2017-12-20 18:12



Non funziona perché l'angolare valuta il contenuto della singola parentesi solo una volta e non individua la variabile che si desidera legare all'interno di quella stringa.

Potresti comunque creare la tua direttiva in quanto tale:

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

e quindi usarlo nel tuo modello in questo modo:

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

Ho aggiornato il tuo violino e sembra funzionare bene http://jsfiddle.net/dS4pB/3/


12
2018-05-27 18:27



Dove stai aggiornando la tua variabile scope, racchiudi questo all'interno di a $timeout chiama per inviare gli aggiornamenti al tuo scope e, successivamente, la tua vista, questo salterà efficacemente l'aggiornamento a quello successivo digest evitando il digest già in corso conflitto:

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

Questa domanda thread potrebbe darti qualche informazione utile riguardo apply vs timeout eccetera


6
2018-04-27 14:34



probabilmente stai affrontando lo stesso problema che ho affrontato di recente e risolto usando ng-bind.

controlla la risposta spiegata in questa domanda:

AngularJS: perché ng-bind è migliore di {{}} in angolare?

una volta che ho usato ng-bind il mio innerhtml è stato correttamente aggiornato.


1
2017-08-23 05:02



Angular 2 ha un modo dolce per farlo, [style. *] = "Value"

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

-2
2017-11-27 00:28