angularjs - utilizzando l'associazione {{}} all'interno di ng-src ma ng-src non viene caricato

Ho cercato di associare un valore all'ng-src di un elemento HTML img senza alcun risultato.angularjs - utilizzando l'associazione {{}} all'interno di ng-src ma ng-src non viene caricato

codice HTML: Codice

<div ng-controller='footerCtrl'> 
<a href="#"><img ng-src="{{avatar_url}}"/></a> 
</div>

AngularJS:

app.controller('footerCtrl',function($scope, userServices) 
{ 
$scope.avatar_url=''; 
$scope.$on('updateAvatar', function() 
{$scope.avatar_url = userServices.getAvatar_url();} 
); 
} 

app.factory('userServices', function($rootScope){ 
var avatar_url=''; 
return{ setAvatar_url: function(newAvatar_url) 
{ avatar_url = newAvatar_url; $rootScope.$broadcast('updateAvatar');}} 
);

vorrei aggiornare la variabile avatar_url nella ng-src ogni volta la rispettiva variabile (avatar_url) nel servizio dell'utente viene aggiornato . La variabile nel servizio utente viene aggiornata tramite una richiesta http.POST al server. Ho controllato che la risposta del server aggiorni la variabile nel servizio utente che viene poi trasmessa alla variabile avatar_url nello footerCtrl.

Tuttavia, l'elemento HTML dell'immagine non riflette affatto le modifiche. In effetti, ho anche provato a preimpostare la variabile avatar_url in un percorso relativo a una delle immagini nella mia pagina, l'immagine non mostra ancora nulla (il valore ng- src è vuoto). T

fonte

2013-05-06 jiaming

Nel 'userServices' si dispone di una funzione di' contro setAvatar_url' nel controller si utilizza la funzione di 'getAvatar_url'. Potrebbe essere questo il problema? –

Ciao, scusa per il ritardo nel rispondere, forse il violino http://jsfiddle.net/jiaming/DvNA9/1 sarebbe più chiaro nello spiegare il codice. Grazie per il tuo tempo. – jiaming

tuo jsfiddle è pieno di bug ... –

La modifica del valore di ng-src è in realtà molto semplice. Come questo:

<html ng-app> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> 
</head> 
<body> 
<img ng-src="{{img_url}}"> 
<button ng-click="img_url = 'https://farm4.staticflickr.com/3261/2801924702_ffbdeda927_d.jpg'">Click</button> 
</body> 
</html>

Ecco una jsFiddle di un esempio di lavoro: http://jsfiddle.net/Hx7B9/2/

fonte

2013-05-06 14:55:54

Grazie. questo era quello che stavo davvero cercando di fare: http://jsfiddle.net/jiaming/DvNA9/12/. Ma il problema principale era che lo stavo rappresentando come un modello jinja nel server del motore app che causava conflitti con tutte le parentesi graffe {{}}. – jiaming

Oh, che intendi. Puoi cambiare il '{{}}' se ti piace: http://jsfiddle.net/THjQe/1/ –

wow, grazie per questa risposta, non sapevo che puoi farlo. (: – jiaming

Possiamo usare ng-src ma quando ng-src's value diventato null, '' o undefined, ng-src non funzionerà. Quindi basta usare ng-if per questo caso:

http://jsfiddle.net/Hx7B9/299/

<div ng-app> 
    <div ng-controller="AppCtrl"> 
     <a href='#'><img ng-src="{{link}}" ng-if="!!link"/></a> 
     <button ng-click="changeLink()">Change Image</button> 
    </div> 
</div>

fonte

2016-06-08 07:38:55 Envy

angularjs - utilizzando l'associazione {{}} all'interno di ng-src ma ng-src non viene caricato

risposta

Problemi correlati