CODEWITHSUNDEEP
javascriptangularjslazy-loading
DaGhostman Dimitrov
DaGhostman Dimitrov

Reputation: 1626

Prevent image loading with angular

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

Upvotes: 2

Views: 1629

Answers (3)

rGiosa
rGiosa

Reputation: 365

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.

Upvotes: 0

Fizer Khan
Fizer Khan

Reputation: 92745

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.

Upvotes: 2

ogm
ogm

Reputation: 379

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.

Upvotes: 0

Related Questions