角UIモードにデータを渡す（ライトボックス効果）

Question

問題： Angular UIブートストラップモード

を使用してモーダルライトボックスを作成したいです。

詳細： NG-Repeatを使用して写真グリッドを構築しました。各繰り返し写真はOpen（）メソッドを使用してモーダルを開きます。クリックしたアイテムの範囲をモーダルに渡す方法に苦労しているので、画像のURLを表示することができます。私はModalにscopeパラメータを実装しました。これは私に親へのアクセスを与えます。ただし、親はクリックされたアイテムの親スコープであり、グリッド内のすべての画像の配列全体を含みます。どの索引がクリックされたかを（プログラム的に）クリックするか、またはモーダルに子スコープだけを送信する方法を理解する必要があります。私は初心者です...私が何かを欠いているか、これに近づくほうが良い方法があるならば、助けは大歓迎です。

私の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

.

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

.

Answer 2

I tried to post this as a comment but apparently it's too long. So, I will post it as an answer even though the correct answers have been given.

If your definition was

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

then your resolve would be

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

You just got confused because you had used string name 'photo' as your function parameter. It has nothing to do with the scope. Also in your resolve definition, you could have called it anything instead of photo

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

and then use abc in your

ModelInstanceCtrl(... , abc)

Again, there is no link to scope here. You are just passing along a value from

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

Within the controller you can set it to anything you would like

$scope.xxx = abc;

photo actually does not exist in the main scope since ng-repeat creates a local scope within the loop. photo is only visible within the loop and that's why you have to pass along to the controller through the function open() parameter. I am new to Angular and keeping track of scope lives has been challenging. Experts out there, please correct me if I am wrong.

Answer 3

Can't you just pass the photo into open? I.e. ng-click="open(photo)"