Prevent image loading with angular

Question

I am looking in building a simple email client and I am stuck at the point, where the client should ask if the user wants to see images/hide them on spam messages. Any approaches are welcome.

How to prevent images from loading within a 'container' with angularJS

Please, note: I am looking for angular solution so please do not suggest jQuery as they do not play nice together. Although pure JS is welcomed

'Do The Simplest Thing That Could Possibly Work' kind of solution

Answer 1

You can use ng-if feature

In controller

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

In View template

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

Thanks @musically_ut for the correction.

Answer 2

Here is a way where you can show picture in angular. All you need to add is a boolean which is true when it's not spam.

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'];
    }
}

Here is the jsFiddle

Also what you can do is when it's true that its spam . Set the $scope.images to nothing.

Answer 3

To achieve what OP wants, i think the best way is to use:

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

This prevents the image from being loaded.