将数据传递给角ui模态(灯箱效果)

前端之家收集整理的这篇文章主要介绍了将数据传递给角ui模态(灯箱效果)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
问题:
我想使用Angular UI Bootstrap模态创建一个模态灯箱

细节:
我已经使用ng-repeat构建了一个照片网格。每个重复的照片使用open()方法打开模态。我正在努力地将点击的项目的范围传递给模态,以便我可以获取显示的图像网址。我已经在modal上实现了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
你可以做这样的事情。

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',resolve: {
      items: function () {
        return $scope.items;
      },photo: function(){
          return photo;
      }
    }
});
原文链接:https://www.f2er.com/angularjs/144070.html

猜你在找的Angularjs相关文章