CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
lostintranslation
lostintranslation

Reputation: 24583

img load event not firing

I have to following directive that I am trying to set an onload listener for the img tag. Inside that link function I programmatically generate the img src.

angular.module('test', [])
.directive('imgTest', function() {
  return {
    restrict: 'A',
    template: '<img ng-src="{{imgSrc}}"></img>',
      link: function(scope, elem) {
      elem.on('load', function() {
        console.log('image loaded');
      });

      scope.imgSrc = "someurl?token=" + getAccessToken();  
    }
  };
});

However the onload function is not firing. Please go easy, I am sure I am doing something really stupid :)

Upvotes: 1

Views: 1593

Answers (2)

user1111
user1111

Reputation: 2030

"elem" is not the image. If you use your directive like the following,

<div img-test />

elem is the "div" instead of the image

Upvotes: 1

Jack Guy
Jack Guy

Reputation: 8523

elem.on('load') is a jQuery-style event listener. It doesn't look like you have a jQuery object as elem there - it came straight from Angular. So try:

$(elem).on('load', function () {})

or

elem.addEventListener('load', function() {});

Upvotes: 0

Related Questions