小编Kra*_*m62的帖子

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