javascript - 防止图像在 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 为假时，有什么方法可以防止这种情况发生吗？

​</p>

Answer 1

要解决此问题，您可以：

1. 使用ng-repeat http://jsfiddle.net/bGA4T/
2. 使用$compile并声明您自己的指令
3. 编写自己的ng-src指令
4. ...

我认为有很多方法可以解决这个问题。

Answer 2

我通过使用来自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>