Detect outerHeight() of element with ng-repeat

Question

I'm trying to detect the height of an element that will change depending on data from a database.

I have used .outerHeight successfully before but can't do this on an element that contains data from a ng-repeat.

Is there a way to do this once the data has populated the angular element or is there another method of detecting this?

Answer 1

Yes, you need to create an attribute directive and put it on the ng-repeat.

<div ng-repeat="whatever in items" outer-height></div>

The directive will have a link function which happens after it has compiled.

app.directive('outerHeight', function(){
  return{
    restrict:'A',
    link: function(scope, element){
       //using outerHeight() assumes you have jQuery
       //use Asok's method in comments if not using jQuery
       console.log(element.outerHeight()); 
    }
  };
});

Here's a Plnkr which will log the outerHeight to console: http://plnkr.co/edit/AdGpnzJilW2179Ybuurk?p=preview

Note You will need to use a $watch and get a new height if data changes.