将数据传递给角ui模态(灯箱效果)
发布时间:2020-12-17 08:05:06 所属栏目:安全 来源:网络整理
导读:问题: 我想使用Angular UI Bootstrap模态创建一个模态灯箱 细节: 我已经使用ng-repeat构建了一个照片网格。每个重复的照片使用open()方法打开模态。我正在努力地将点击的项目的范围传递给模态,以便我可以获取显示的图像网址。我已经在modal上实现了scope
问题:
我想使用Angular UI Bootstrap模态创建一个模态灯箱 细节: 我的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; } } }); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |