Bild Verhindern von Rendering in AngularJS

Question

Ich habe diese jsFiddle: http://jsfiddle.net/HMZuh/1/

Welche diesen HTML

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

und dieses Skript enthält:

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

    $scope.imageSource = ''; 

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

Ich erhalte, eine 404-Bild nicht gefunden, wenn die Quelle noch nicht festgelegt wurde, gibt es eine Möglichkeit, dies zu verhindern, wenn showMe falsch ist?

Answer 1

Ich verbesserte dies mit der Verwendung von ui-if von http://angular-ui.github.com/ Statt verstecken/zeigt mit ng-hide/ng-show, ui-wenn das Element nicht einfach gerendert.

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

Answer 2

Um dies zu lösen, können Sie:

1. Verwenden ng-repeathttp://jsfiddle.net/bGA4T/
2. Verwenden $compile und erklären, um Ihre eigene Richtlinie
3. Schreiben Sie Ihre eigene ng-src Richtlinie
4. ...

Ich denke, es gibt viele Möglichkeiten, dies zu lösen.