Question

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

如何使用angularJS
防止图像加载到“容器”中

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

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

Answer 1

您可以使用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进行更正。

Answer 2

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

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设置为空。

Answer 3

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

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

这可以防止图像被加载。

使用角度防止图像加载

3 个答案: