将数据传递给角度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

你不能把照片打开吗？ 即点击=“打开（照片）”