Geek asks and answers

How to access image properties after angular ng-repeat?

I am trying to get the width and height of the image that I pull from the server in order to apply a suitable style to it. Therefore, I use ng-repeat to populate the template:

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

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

Edit: clarify. I want to access the img object to get its width and height, to calculate its size, to apply the style to the parent div (currently with the class span2).

+5
source share
1 answer

I don’t know what you are trying to do, but it seems 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 will use it like this:

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

EDIT: jquery, .

+14

More articles:


All Articles