将数据传递给角度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的新手,跟踪范围生活一直充满挑战.那里的专家,如果我错了,请纠正我.