使用角度防止图像加载

时间:2014-02-20 16:48:06

标签: javascript angularjs lazy-loading

我正在寻找构建一个简单的电子邮件客户端,我陷入困境,客户应该询问用户是否想要查看图像/隐藏垃圾邮件。欢迎任何方法。

  

如何使用angularJS

防止图像加载到“容器”中

请注意: 我正在寻找角度解决方案,所以请不要建议jQuery,因为他们不能很好地一起玩。虽然欢迎纯JS,但

'Do The Simplest Thing That Could Possibly Work'种解决方案

3 个答案:

答案 0 :(得分:2)

您可以使用ng-if功能

在控制器中

$scope.toggleImage = false; // true - Show, false - Hide. By default hide image.

在视图模板中

<img ng-src="" ng-if="toggleImage">
<a href="" ng-click="toggleImage = !toggleImage">Toggle Image</a>

感谢@musically_ut进行更正。

答案 1 :(得分:0)

这是一种可以用角度显示图片的方法。你需要添加的是一个布尔值,当它不是垃圾邮件时是真的。

Html:

<!-- language: html -->
<div ng-app ng:controller="ShowHideController">
    <div ng-repeat='image in images'>
        <img ng-src="{{image}}"/>
    </div>
    <button ng-click='showImage()'> show image </button>
<div>

Javascript:

    function ShowHideController($scope) {

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

以下是jsFiddle

另外,你可以做的是它的垃圾邮件是真的。将$ scope.images设置为空。

答案 2 :(得分:0)

为了实现OP想要的,我认为最好的方法是使用:

<img ng-src="{{vm.isVisible ? 'path/to/image' : ''}}" />

这可以防止图像被加载。