How to access image properties after angular ng-repeat?

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).

@JoshDavidMiller: I've add clarification in the post. But basically I would like to access img object after it is populated to get its size — wonglik
– wonglik, Commented Jan 24, 2013 at 18:33

Ben Lesh · Accepted Answer · 2013-01-24 18:34:42Z

14

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.

answered Jan 24, 2013 at 18:34

Ben Lesh

109k47 gold badges251 silver badges233 bronze badges

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

Collectives™ on Stack Overflow

How to access image properties after angular ng-repeat?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related