Sto provando ad applicare un'immagine di sfondo ad un div usando l'angolare ng-style (ho provato una direttiva personalizzata prima con lo stesso comportamento), ma non lo fa sembra che funzioni.angularjs ng-style: background-image non funziona
Tuttavia, se provo un colore di sfondo, sembra che funzioni correttamente. Ho provato una fonte remota e una fonte locale anche http://lorempixel.com/g/400/200/sports/, nessuno dei due ha funzionato.
sintassi corretta per background-image è:
background-image: url("path_to_image");
sintassi corretta per il GN-stile è:
ng-style="{'background-image':'url(https://www.google.com/images/srpr/logo4w.png)'}">
È possibile utilizzare i seguenti per analizzare valori dinamici:
ng-style="{'background-image':'url({{myBackgroundUrl}})'}"
o così:
ng-style="{'background-image': 'url(' + myBackgroundUrl + ')'}"
SE si dispone di dati si sta aspettando per il server di tornare (item.id) e hanno un costrutto come questo:
ng-style="{'background-image':'url(https://www.myImageplusitsid/{{item.id}})'}"
Assicurati di aggiungere qualcosa come ng-if="item.id"
Altrimenti Avremo due richieste o una difettosa.
Buon punto :) +1 – Roland
Per coloro che stanno lottando per ottenere questo lavoro con IE11
HTML
<div ng-style="getBackgroundStyle(imagepath)"></div>
JS
$scope.getBackgroundStyle = function(imagepath){
return {
'background-image':'url(' + imagepath + ')'
}
}
Mi hai appena salvato la vita in questo momento grazie .. Ho passato ore a cercare di capire perché il mio ng-style non veniva mostrato in IE 11. Non capisco ancora perché, ma ha funzionato ! – w3bMak3r
Era l'unica cosa che funzionava anche in cromo (ubuntu) tutti gli altri esempi o "la via ufficiale" sembra essere ignorata. Lo stile è cambiato ma non ha alcun effetto. – davidkonrad
Solo per i record che si può anche definire il vostro oggetto nel il controller come questo:
this.styleDiv = {color: '', backgroundColor:'', backgroundImage : '' };
e poi si può definire una funzione per modificare la proprietà dell'oggetto direttamente:
this.changeBackgroundImage = function(){
this.styleDiv.backgroundImage = 'url('+this.backgroundImage+')';
}
Farlo in questo modo è possibile modificare dinamicaly il vostro stile.
Questo ha funzionato per me, le parentesi graffe non sono necessarie.
ng-style="{'background-image':'url(../../../app/img/notification/'+notification.icon+'.png)'}"
notification.icon qui è variabile di ambito.
Se abbiamo un valore dinamico che ha bisogno di andare in uno sfondo CSS o attributo background-image, può essere solo un po 'più difficile da specificare.
Diciamo che abbiamo una funzione getImage() nel nostro controller.Questa funzione restituisce una stringa formattata in questo modo: url (icons/pen.png). Se lo facciamo, la dichiarazione ngStyle viene specificata la esattamente lo stesso modo di prima:
ng-style="{ 'background-image': getImage() }"
Assicurati di mettere le virgolette attorno alla background-image nome della chiave. Ricorda che questo deve essere formattato come una chiave oggetto Javascript valida.
Qual è la fonte della citazione? – Manas
dannazione ... ho dimenticato il 'url' :) grazie @Stewie – Roland
btw, come faccio a rendere qualcosa del tipo:' {{products.products [currenRoute] .desc}} '; in html? – Roland
Suppongo che 'currentRoute' sia un ID prodotto dal percorso? In tal caso, il servizio $ routeParams, se lo si inserisce nel controller, manterrà il riferimento al proprio id ('$ scope.productId = $ routeParams.id'), dato che il percorso è definito come '/ products /: id'. Ma potresti voler aprire una nuova domanda per questo. – Stewie