How to make an AngularJS directive to change the src attribute of an image?

Question

I want to create a angular directive for my image tags that changes the image src to a random image in a collection or through a call to a service. The change should should happen after 5 seconds or as an input to the directive. Is this possible and could someone help me starting?

I will also add animations to this but, thats for later.....

As a newbie to AngularJS any help or directions would be appreciated.

Thanks.

MrE · Accepted Answer · 2016-11-23 00:08:28Z

6

When one writes an img tag source like this:

<img ng-src='{{imagesrc}}' />

The image source attribute gets bound to the variable imagesrc, which you can then change in JS, such as by using $timeout:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $timeout) {
  $scope.name = 'World';
  $scope.imagesrc = "http://www.steff.qc.ca/main/wp-content/uploads/2010/03/phoenix.gif";
  $timeout(function() {
    $scope.imagesrc = "http://im2-tub-ru.yandex.net/i?id=3fb6126a9a8ea667700f698b774e34d3-90-144&n=21";
  }, 1000);
});

See full plunkr here: http://plnkr.co/edit/q7dI6N6skuGlhfQTqyQT?p=preview

edited Nov 23, 2016 at 0:08

MrE

21.2k15 gold badges92 silver badges113 bronze badges

answered Jan 26, 2015 at 16:36

Petr Averyanov

9,5963 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

TheViking Over a year ago

Thanks for your time and effort. But this is to basic even for me :-) Im looking for an example how this could be done in a directive because I want to create a carousel-like thing. Lets say images placed in three rows and three columns of a table. That is nine images. Each an one of them should be changed at random times with new randomly selected images from an array of images. Do I get myself clear here?

TheViking Over a year ago

Wow!! Thanks Petr!!!! Looks like you have hit the nail. I'll take a closer look at this tonight.

Paul · Accepted Answer · 2015-01-26 16:56:44Z

-1

You can write a directive, and in the link function write something like this:

function link(scope, element, attrs) {
    var format,
        timeoutVal;

    function updateAttrs(value) {
      element.attr('src', value));
    }

    element.on('click', function() {
      updateAttrs(value);
    });
  }

Somwhere in the link you can use angular $timeout. This code snippet does not work but it could give you some some idea of the mechanism. Another way is to use ng-mouseover and create in the parent controller a function, which will change attrs of the element.

answered Jan 26, 2015 at 16:56

Paul

6,81711 gold badges46 silver badges60 bronze badges

Collectives™ on Stack Overflow

How to make an AngularJS directive to change the src attribute of an image?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related