根据元素大小处理范围变量

Question

被修改

我需要在$scope.images中使用根据元素大小的函数处理的数组。

test.html看起来像这样

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

我只是想知道如何创建一个简单的图像库指令，它将在像

这样的函数上使用自己的宽度

  

$ scope.images = CreateThumbnails（$ scope.images，element.innerWidth（））

CreateThumbnails为newwidth中的图片计算新属性$scope.images。当然，如果在浏览器大小改变时计算它们会很好，但是简单的负载计算就足够了。

更多编辑

是的，所以如果我把它称为

，我至少可以修改$scope.images

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

可悲的是，在控制器中仍然想知道如何在指令中访问$ scope.images，以便我可以使用该元素。

更新

Phew，终于至少得到了一些工作。我只是

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

然后在包含图像的指令

中

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

所以至少它会在加载时创建缩略图，我会试着看看如何调整浏览器的大小。

Answer 1

ngRepeat指令以1000优先级运行，如果要在提供给ngRepeat之前处理数据，则需要将priotity属性设置为高于1000的值。但大多数时候你不需要这样做。您可以创建一个封装ngRepeat部分的指令，甚至更好（也适合您的情况），在重复元素上创建一个指令，在您的情况下，它将是img元素本身。

Answer 2

好吧，我可以在指令中听窗口事件，所以让它工作：

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);
  };
});

有些重复仍然是因为我认为我必须继续在资源上使用回调。