將數據傳遞給角度ui模態（燈箱效果）

Question

問題：我想使用Angular UI Bootstrap模式創建一個模態燈箱

細節：我使用ng-repeat構建了一個照片網格。 每張重復的照片都使用open（）方法打開模態。 我正在努力將如何將點擊的項目的范圍傳遞給模態，以便我可以抓取圖像網址來顯示。 我已經在模態上實現了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

我試圖將此作為評論發布，但顯然它太長了。 因此，即使給出了正確的答案，我也會將其作為答案發布。

如果你的定義是

$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的新手，跟蹤范圍生活一直充滿挑戰。 那里的專家，如果我錯了，請糾正我。

Answer 3

你不能把照片打開嗎？ 即點擊=“打開（照片）”