问题:
我想使用Angular UI Bootstrap模态创建一个模态灯箱
我想使用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
你可以做这样的事情。
原文链接:https://www.f2er.com/angularjs/144070.htmlHTML
<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; } } });