AngularJS n'est pas mise à jour img src lors de changements de modèle

- Je utiliser ng-src pour charger les images. La valeur est chargé à partir d'une certaine étendue variable, comme ceci:

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

Mon problème est que quand je lance delete $scope.currentReceipt, il fait ng-src attribut vide, mais ne reflète pas dans src attribut. Donc, comme un résultat que je n'arrête pas de voir cette image où j'ai besoin d'espace réservé vide.

Comment puis-je faire?

Mettre dans un plunkr
Double Possible de vide ng-src n'a pas d'image de mise à jour

OriginalL'auteur Sergei Basharov | 2013-07-05

  1. 23

    C'est le comportement attendu de la ngSrc et ngHref directives. Ces directives soutien reconnaissant de nouveaux chemins, mais lorsque le chemin n'est pas disponible, les directives sortie en silence (je vois un pull request ici.).

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

    <img ng-href="{{currentReceipt.image}}" ng-show="currentReceipt.image" />
    +1 pour l'utilisation de ng-show, vous pouvez également envisager de supprimer l'image du DOM avec ng-switch si vous voulez il a complètement enlevé.
    Merci, il semble que j'ai pour contourner la façon dont vous le suggérer. J'ai eu un coup d'oeil à l'intérieur Angulaire code de gestion de la ng-src directive et a remarqué que trop, qu'il vient de sorties, si aucune valeur donnée, non pas la suppression de la src valeur ou quelque chose comme ça. J'ai décidé d'utiliser ng-classe pour gérer les cas de ce genre. Merci!
    Je suppose que les auteurs qui, intentionnellement, la directive de simplement quitter si la valeur est undefined, parce que la suppression ou l'effacement de l'attribut src rend l'affichage du navigateur de l'cassé vignette de l'image, ce qui n'est pas vraiment souhaitée.

    OriginalL'auteur

  2. 11

    appel de $scope.$appliquer() après supprimez $champ d'application.currentReceipt.

    OriginalL'auteur

  3. 1

    La solution suivante fonctionne pour moi:

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

    OriginalL'auteur

  4. 0

    Vous pouvez effectivement vérifier la longueur et ne

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

    OriginalL'auteur