Question

I am trying to get image width and height of an image that I pull from server in order to apply proper style for it. So I am using ng-repeat to fill template :

<div ng-repeat="feed in feeds"> 
<div class="span2" >
    <img ng-src='{{feed.image_url}}'>
</div> ...

My question is how do I access img object so I can change parent div class? Or maybe what is the angular.js way of doing thing like that?

Edit : To be more specified. I want to access img object to get its width and height to calculate its size to apply style to parent div (currently with class span2).

Answer 1

I don’t know what you’re trying to do, but it sounds like a job for a directive.

app.directive('styleParent', function(){ 
   return {
     restrict: 'A',
     link: function(scope, elem, attr) {
         elem.on('load', function() {
            var w = $(this).width(),
                h = $(this).height();

            var div = elem.parent();

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

and you’d use it like so:

<img ng-src="imageFile" style-parent/>

EDIT: If you’re not using jquery, this will vary a little.