AngularJS Позиционированный вывод фото

280

12 октября 2017, 11:43

Передав в функцию load идентификатор, достаю из таблицы имена файлов из которых в дальнейшем генерирую ссылки и по клику вывожу ссылки на фото.

<div ng-repeat="img in photo">
<a href=""  ng-click="showImg = !showImg;load(img.id)">Show images</a>
<span id="list_photo" ng-show="showImg"></span>
</div>

Функция:

$scope.image = function (id) {
$http.get('http://site.com/photo/img/'+id)
 .then(function success(response) {
  img = response.data;
  console.log('Ответ: ', response.data);
   var currentIndex = 0;
   $("#list_photo").html("<img src='#' />");
   $("#list_photo > img").click(function () {
    if (currentIndex >= img.length)
     currentIndex = 0;
     $(this).attr("src", "/public/upload/pict/"+ img[currentIndex++].filename);
   });
   $("#list_photo > img").click();
  });
};

Дело в том, что открывается почему-то только фотография, ссылка которой находится выше всех, т.е. последняя. Если клацаю на остальные Show images, в консоли вижу, что имена файлов возвращаются, но возле ссылки фотка не открывается. Как можно привязать эти фото к конкретным позициям Show images?

Answer 1

Вам надо думать, как решать задачу не через jQuery, а через angular. У него свои подходы.

Я бы вам советовал убрать из вашего проекта jQuery вообще. Это поможет думать, не опираясь на опыт с jQuery.

Важные отличия:

в jQuery мы часто создаем элементы, привязываем к ним события.
в angular мы пользуемся уже готовым шаблоном, с готовыми событиями.

Пример на jsfiddle.

angular.module('ExampleApp', []) 
  .controller('ExampleController', function(PhotoService) { 
    var vm = this; 
    vm.showImg = false; 
    vm.photos = [{ 
      id: 1 
    }, { 
      id: 2 
    }]; 
    vm.load = function(photo) { 
      vm.showImg = !vm.showImg; 
      //Не загружать повторно, если уже загрузили 
      if (photo.images) 
        return; 
      PhotoService.getPhoto(photo.id) 
        .then(function success(response) { 
          photo.images = response.data; 
          console.log('Ответ: ', response.data); 
        }); 
    }; 
  }) 
  .service("PhotoService", function($http, $q) { 
    this.getPhoto = function(id) { 
      //симуляция запроса 
      return $q.resolve({ 
        data: [{ 
          filename: "https://lorempixel.com/400/200/people/" + id, 
        }, { 
          filename: "https://lorempixel.com/400/200/people/" + (id * 2), 
        }, { 
          filename: "https://lorempixel.com/400/200/people/" + (id * 3), 
        }] 
      }); 
      //В реальности делаем запрос к серверу 
      //return $http.get('http://site.com/photo/img/' + id);       
    }; 
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<div ng-app="ExampleApp"> 
  <div ng-controller="ExampleController as vm"> 
    <div ng-repeat="photo in vm.photos"> 
      <a href="" ng-click="vm.load(photo)">Show images</a> 
      <span ng-show="vm.showImg"> 
        <!-- Вместо динамического построений элементов, мы отрисовываем уже существующие. --> 
        <img ng-repeat="img in photo.images" ng-src="{{img.filename}}" /> 
      </span> 
    </div> 
  </div> 
</div>