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为false时，是否有任何方法可以阻止这种情况？

Answer 1

要解决此问题，您可以：

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

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

Answer 2

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

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

防止图像在AngularJs中渲染

2 个答案: