Передайте данные в angular ui modal (эффект лайтбокса)

Проблема: Я хочу создать модальный лайтбокс, используя Angular UI Bootstrap modal

Детали: Я построил сетку с использованием ng-repeat. Каждая повторяющаяся фотография открывает модальный метод open(). Я борюсь с тем, как передать область щелкнутого элемента в модальный, чтобы я мог захватить URL-адрес изображения для отображения. Я внедрил параметр области модальности, который дает мне доступ к родительскому элементу; однако родительский элемент является родительской областью защёщенного элемента и содержит весь массив всех изображений в сетке. Мне нужно выяснить, как сказать (программно), какой индекс был нажат, или отправить только область содержимого модальности. Я новичок... если мне что-то не хватает или есть лучший способ приблизиться к этому, любая помощь приветствуется.

Мой HTML:

<section ng-controller="ModalDemoCtrl">
  <div ng-repeat="photo in photos.data">

    <img src="{{photo.source}}" class="thumbnail img-responsive" ng-click="open()">

  </div>
</section>

Экземпляр и контроллер:

app.controller('ModalDemoCtrl', function ($scope, $modal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.open = function (scope) {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      scope: $scope,
      controller: ModalInstanceCtrl,
      resolve: {
        items: function () {
          return $scope.items;
        },
// this returns as undefined
        photo: function(){
            return $scope.photo;
        }
      }
    });


    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };
});


var ModalInstanceCtrl = function ($scope, $modalInstance, items, photo) {



  $scope.items = items;
  $scope.photo = photo;
  $scope.selected = {
    item: $scope.items[0]
  };


  $scope.ok = function () {
    $modalInstance.close($scope.selected.item);
  };


  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
  console.log($scope);

};

Это в основном то, как выглядит область видимости. Индекс предметов, который мне нужен, глубоко погружен, и мне нужно знать (программно), на который был сделан щелчок. Мне нужен источник из индекса [0]

$scope
--$parent
---$parent
----$photos
-----$$v
------data
-------0
--------Source
-------1
-------2
-------3
-------4
-------5
-------6
-------7
-------8

Ответ 1

Вы могли бы просто сделать что-то вроде этого.

HTML

<img src="{{photo.source}}" class="thumbnail img-responsive" ng-click="open(photo)">

Javascript

$scope.open = function (photo) {

  var modalInstance = $modal.open({
    templateUrl: 'myModalContent.html',
    scope: $scope,
    controller: ModalInstanceCtrl,
    resolve: {
      items: function () {
        return $scope.items;
      },

      photo: function(){
          return photo;
      }
    }
});

Ответ 2

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

Если ваше определение было

$scope.open = function (xyz) {...

тогда ваше решение будет

...photo: function(){ return xyz;}

Вы просто запутались, потому что в качестве параметра своей функции вы использовали имя строки 'photo'. Это не имеет никакого отношения к сфере действия. Также в определении разрешения вы могли бы назвать его чем-то вместо фотографии

...abc: function() {return xyz}

а затем используйте abc в

ModelInstanceCtrl(... , abc)

Опять же, здесь нет ссылки на область. Вы просто передаете значение из

open(photo) to function (xyz) to ModalInstanceCtrl (... , abc)

Внутри контроллера вы можете установить его на все, что вы хотели бы

$scope.xxx = abc;

фото фактически не существует в основной области, так как ng-repeat создает локальную область внутри цикла. фотография видна только внутри цикла, и поэтому вам нужно перейти к контроллеру через параметр функции open(). Я новичок в Angular, и отслеживание масштабов жизни было сложным. Эксперты там, пожалуйста, исправьте меня, если я ошибаюсь.

Ответ 3

Разве ты не можешь просто сфотографировать фотографию? То есть нг-клик = "открытое (фото)"