1

已编辑

$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 以便我可以使用该元素。

更新

呼，终于至少有一些工作了。我只要

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

然后在包含图像的指令中

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

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

4

2 回答 2

0

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

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

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

于 2013-02-17T13:43:32.943 回答
0

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

于 2013-02-16T19:27:24.897 回答