Arhn - архитектура программирования

Обработка переменной области видимости в соответствии с размером элемента

Отредактировано

Мне нужен массив в $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();
  };
});

Так что, по крайней мере, он создает миниатюры при загрузке, я попробую посмотреть, как я могу проверить, когда размер браузера изменяется.

angularjs
16.02.2013

Ответы:


1

Директива ngRepeat работает с приоритетом 1000, если вы хотите обрабатывать данные перед передачей в ngRepeat, вам нужно установить свойство priotity со значением выше, чем 1000. Но в большинстве случаев вам не нужно было бы это делать. Вы можете создать директиву, которая будет инкапсулировать часть ngRepeat, или даже лучше (что также подойдет для вашего случая), создать директиву для повторяющегося элемента, в вашем случае это будет сам элемент img.

16.02.2013
  • Вы правы, мне не нужно использовать шаблоны, я просто хочу обработать массив элементов. Отредактированный вопрос для простоты. 17.02.2013

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

    Некоторое дублирование все еще, потому что я думаю, что должен продолжать использовать обратный вызов для ресурсов.

    17.02.2013
    Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..