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

ngRepeatディレクティブは1000の優先度で実行されます。与える前にデータを処理する場合は、より高い値でプロパティngRepeatを設定する必要があります。しかし、ほとんどの場合、そうする必要はありません。部分をカプセル化するディレクティブを作成するか、さらに良い方法（これもあなたのケースに合うでしょう）を作成し、繰り返し要素でディレクティブを作成することができます。あなたの場合、それは要素自体になります。priotity1000ngRepeatimg

于 2013-02-16T19:27:24.897 に答える
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 に答える