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);

};

这基本上是范围的外观。我需要的项目索引深埋，我需要（以编程方式）知道哪一个被点击了。我需要关闭Index [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

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

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

3 个答案: