防止图像在AngularJs中渲染

Question

我有这个jsFiddle:http: //jsfiddle.net/HMZuh/1/

其中包含此HTML

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

和这个脚本:

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

    $scope.imageSource = '';

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

我得到的是404,当源尚未设置时找不到图像,当showMe为假时有没有办法防止这种情况？

​

Answer 1

我通过使用http://angular-ui.github.com/中的 ui-if 对此进行了改进 ，而不是使用 ng-hide/ng-show 隐藏/显示，ui-if 根本不渲染元素。

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