Real image size in Angular

Question

I am kinda new to Angular but I am trying to get my real image size from images which I get with an ng-repeat. I resize these images for displaying purposes within my HTML file but I want to know what the real size is, for this I made an directive but I cant get it to work.

angular.module('platForm').directive("getImageResolution", function(){
   return {
   restrict: 'A',
   scope:{
       size:"=getImageResolution"
   },
   link: function(scope, elem, attr) {
     elem.on('load', function() {
        var w = $(this).width();
        var h = $(this).naturalHeight;
            // console.log(w,h);
            scope.size = {};
            scope.size.x = w;
            scope.size.y = h;
            console.log(scope.size);

        //check width and height and apply styling to parent here.
     });
   }
 } 
});

Any help is much appreciated :)

edit: The

    var w = $(this).width();
    var h = $(this).naturalHeight;

Are tests, the .width() get the width of the resized image (which I dont want) and the naturalHeight doesnt work.

Answer 1

Use

elem[0].naturalWidth

instead