将数据传递给角度 ui 模态（灯箱效果）

Question

问题： 我想使用 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

Answer 1

我试图将此作为评论发布，但显然它太长了。因此，即使给出了正确的答案，我也会将其发布为答案。

如果你的定义是

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

那么你的决心是

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

您只是因为使用字符串名称“照片”作为函数参数而感到困惑。它与范围无关。同样在您的解析定义中，您可以将其称为任何东西而不是照片

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

然后在你的

中使用abc

ModelInstanceCtrl(... , abc)

同样，这里没有指向范围的链接。您只是传递来自

的值

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

在控制器中，您可以将其设置为您想要的任何内容

$scope.xxx = abc;

photo 实际上并不存在于主作用域中，因为 ng-repeat 在循环中创建了一个局部作用域。 photo 仅在循环中可见，这就是为什么您必须通过函数 open() 参数传递给控制器​​的原因。我是 Angular 的新手，跟踪范围的生活一直很有挑战性。各位高手，如有错误请指正。

Answer 2

你可以这样做。

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 3

您不能直接将照片传递给 open 吗？ IE。 ng-click="打开(照片)"