imagen Prevención de la representación en AngularJS

Question

tengo unas pocas cosas jsFiddle: http://jsfiddle.net/HMZuh/1/

¿Qué contiene este código HTML

<div ng-app ng:controller="ShowHideController"> 
    <div ng-show='showMe'> 
     <img ng-src="{{imageSource}}"/> 
    </div> 
    <button ng-click='showImage()'> show image </button> 
<div> 

y este guión:

function ShowHideController($scope) { 
    $scope.showMe = false; 

    $scope.imageSource = ''; 

    $scope.showImage = function(){ 
     $scope.showMe = true; 
     $scope.imageSource = 'https://www.google.com/images/srpr/logo3w.png'; 
    } 
} 

estoy un 404, la imagen no se encuentra cuando la fuente aún no se ha establecido, ¿hay alguna forma de prevenir esto cuando showMe es falso?

Answer 1

he mejorado en esto utilizando la interfaz de usuario, si es de http://angular-ui.github.com/ En lugar de ocultar/mostrar el uso ng de piel/ng presentas ui-si simplemente no hace que el elemento.

<div ui-hide='ImageHasBeenUploaded'> 
    <img ng-src='/some/image/path/{{imageName}}/> 
</div> 

Answer 2

Para resolver este puede:

1. Uso ng-repeathttp://jsfiddle.net/bGA4T/
2. Uso $compile y declarar su propia directiva
3. Escriba su propia ng-src Directiva
4. ...

Creo que hay muchas formas de resolver esto.