加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

发布时间:2020-12-17 08:05:06 所属栏目:安全 来源:网络整理
导读:问题: 我想使用Angular UI Bootstrap模态创建一个模态灯箱 细节: 我已经使用ng-repeat构建了一个照片网格。每个重复的照片使用open()方法打开模态。我正在努力地将点击的项目的范围传递给模态,以便我可以获取显示的图像网址。我已经在modal上实现了scope
问题:
我想使用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;
      }
    }
});

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读