从AngularJs呈现preventing图像 [英] Preventing image from rendering in AngularJs

问题描述

我有这样的jsfiddle：
http://jsfiddle.net/HMZuh/1/

I have this jsFiddle: http://jsfiddle.net/HMZuh/1/

里面包含这个网站

<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，而不是当源尚未设置发现的形象，有preventing任何方式这个时候SHOWME是假的？

I'm getting a 404, image not found when the source has not yet been set, is there any way of preventing this when showMe is false?

推荐答案

我对这个利用改进的用户界面，如果从的 http://angular-ui.github.com/
相反，隐藏/ NG采用隐藏/ NG秀展示，UI，如果根本没有渲染的元素。

I improved on this by using ui-if from http://angular-ui.github.com/ Instead of hiding/showing using ng-hide/ng-show, ui-if simply does not render the element.

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

这篇关于从AngularJs呈现preventing图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！