Process a scope variable according to element size

Question

Process a scope variable according to element size

Edited

I need an array in $scope.images processed with a function according to element size.

test.html looks like this

<div image-gallery>
  <div ng-repeat='img in images'>
    <img ng-src='{{img.thumbnail}}' style='width: {{img.newwidth}}'>
  </div>
</div>

I'm just wondering how to create a simple image-gallery directive that would use its own width on a function like

$scope.images = CreateThumbnails($scope.images, element.innerWidth())

CreateThumbnails calculates a new attribute newwidth to the images in $scope.images. Of course it would be nice if they were calculated whenever browser size changes but a simple on load calculation would be sufficient.

More edit

Right, so I can at least modify $scope.images if I call it like

$scope.images = Images.get({}, function(images) {
  CreateThumbnails(images, 1000)
}

Sadly that's in the controller so still wondering how to access $scope.images in a directive so that i can use the element.

Update

Phew, finally got at least something working. I'll just have

$scope.images = Images.get({}, function() {
  CreateThumbnails($scope.images, $scope.elementwidth)
)

And then in the directive that contains the images

app.directive("imageGallery", function() {
  return function(scope, element, attrs) {
    scope.elementwidth = element.innerWidth();
  };
});

So at least it creates thumbnails on load, i'll try and see how I can check when browser is resized.

angularjs

Answer 1

ngRepeat directive runs at 1000 priority, if you want to handle the data before giving to ngRepeat you need to set priotity property with a value higher than 1000. But most of the time you would not need to do so. You can create a directive which would encapsulate the ngRepeat portion, or even better, (which also would suit your case), create a directive at the repeating element, in your case, it would be img element itself.

Answer 2

Alright sweet i can listen to window events in directives so got it working:

app.directive("imageGallery", function($window) {
  return function(scope, element) {
    scope.elementwidth = element.innerWidth();
    angular.element($window).bind("resize", function() {
      scope.elementwidth = element.innerWidth();
    });
  };
});

app.controller("ImageTestCtrl", function($scope, Imgs) {
  $scope.images = Imgs.index({}, function() {
    $scope.thumbs();
  });
  $scope.$watch("elementwidth", function() {
    $scope.thumbs();
  });
  return $scope.thumbs = function() {
    CalculateThumbnails($scope.images, $scope.elementwidth);
  };
});

Some duplication still because i think i have to keep using the callback on resources.