Nascondi elemento se l'attributo angolare è vuoto

Question

Ho un elemento immagine che sta ottenendo il suo percorso da un attributo che ho sul mio oggetto angolare. Tuttavia se questo (imagePath) è vuoto, ho un'immagine spezzata. Mi piacerebbe non rendere l'immagine se l'attributo è vuoto, ma non vedo un modo per farlo. Qualche idea?

<img width="50px" src="/resources/img/products/{{current.manufacturerImage.imagePath}}"> 

Answer 1

Si desidera verificare la direttiva ngHide.

Quindi il tuo codice sarebbe simile a qualcosa.

<img width="50px" ng-hide="current.manufacturerImage.imagePath == ''" 
src="/resources/img/products/{{current.manufacturerImage.imagePath}}"> 

In alternativa, si potrebbe anche provare il suggerimento di darkporter

<img width="50px" ng-show="current.manufacturerImage.imagePath" 
src="/resources/img/products/{{current.manufacturerImage.imagePath}}"> 

Si potrebbe anche aggiornare questo per verificare se l'oggetto è null o undefined poi nascondere l'elemento.

Answer 2

Questo suggerimento non funzionerebbe per me perché stavo generando i miei collegamenti immagine in base al ruolo degli utenti. L'utente aveva un ruolo, ma ciò non significava che avessero un'immagine associata ad esso.

così ho creato una direttiva:

angular.module('hideEmptyImages', []) 
.directive('hideEmptyImage',function() { 
    return { 
     Restrict: 'AE', 
     Link: function (scope, elem, attrs) { 
      elem.error(function() { 
       elem.hide(); 
      }); 
     } 
    }; 
}); 

Quindi:

<img hide-empty-image width="50px" src="/resources/img/products/{{current.manufacturerImage.imagePath}}"> 

non mostrerà se il .imagePath è vuoto o se semplicemente non è un'immagine associata.