Javascript Girl
  1. Javascript Girl
  3. AngularJS ne met pas à jour img src lorsque le modèle change
Intereting Posts
InnerHTML sans html, juste le texte Comment sérialiser et désérialiser des objets Javascript? Backbone.js fetch () JSON au modèle get () renvoie indéfini Comment organiser la minification et l'emballage des fichiers css et js pour accélérer le site Web? ReactJS JSX toString () Comment dessiner un rectangle sur toile comme nous le faisons à la peinture? Comment donner un bloc bloqué en tant que FormData un nom de fichier? Empêcher le scintillement indésirable du fait du comportement inné de WebView Comment vérifier la longueur de chaîne avec JavaScript AngularJS: ngTouch 300ms Delay Définir la valeur de l'entrée cachée avec jquery Javascript RTE avec spellcheck Comment arrêter le chargement de la page lorsque vous cliquez sur F5 Récupérer une représentation de chaîne à partir de l'octet ComputeDigest (algorithme, valeur) Réagir à la mise en cache des composants rendus

AngularJS ne met pas à jour img src lorsque le modèle change

J'utilise ng-src pour charger des images. La valeur est chargée à partir d'une variable de portée, comme ceci: 

 <img ng-src="{{currentReceipt.image}}"/>

Mon problème est que lorsque je lance delete $scope.currentReceipt , il rend l'attribut ng-src vide mais ne le reflète pas dans l'attribut src . Donc, en conséquence, je continue de voir cette image où j'ai besoin d'espace réservé vide.

Comment puis-je m'en occuper?

C'est le comportement attendu des directives ngSrc et ngHref. Ces directives ne prennent en charge que la reconnaissance de nouveaux chemins, mais lorsque le chemin d'accès n'est pas disponible, les directives sortent silencieusement (je vois ici une demande de tirage).

Donc, une solution de contournement pourrait être d'utiliser ngShow avec ngHref pour cacher complètement la balise lorsque la variable d'image n'est plus disponible: 

 <img ng-href="{{currentReceipt.image}}" ng-show="currentReceipt.image" />

Appeler $ scope. $ Apply () après effacer $ scope.currentReceipt.

La solution suivante fonctionne pour moi: 

 <img ng-src="{{currentReceipt.image}}" ng-show="currentReceipt.image != null" />

Vous pouvez effectivement vérifier la longueur et faire 

  <img ng-show="user.thumbnail.length > 1" class="img-circle thumb pull-left" ng-src="{{user.thumbnail}}" alt="{{user.firstname}} {{user.lastname}}">