javascript 将数据传递给 angular ui 模态（灯箱效果）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22058474/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pass data to angular ui modal (lightbox effect)
提问by Kram62
Problem:I want to create a modal lightbox using the Angular UI Bootstrap modal
问题：我想使用 Angular UI Bootstrap 模态创建模态灯箱
Details:I have built a photo grid using ng-repeat. Each repeated photo opens the modal using the open() method. I'm struggling with how to pass the scope of the clicked item to the modal so I can grab the image url to display. I've implemented the scope parameter on the modal, which gives me access to the parent; however the parent is the parent scope of the clicked item and contains the whole array of all images in the grid. I need to figure out how to tell (programmatically) which index has been clicked, or send just the child scope to the modal. I'm a newbie... if I'm missing something or there's a better way to approach this, any help is welcome.
详细信息：我使用 ng-repeat 构建了一个照片网格。每张重复的照片都使用 open() 方法打开模态。我正在努力解决如何将单击项目的范围传递给模态，以便我可以抓取要显示的图像 url。我已经在模态上实现了 scope 参数，这使我可以访问父级；但是，父项是单击项的父级范围，并包含网格中所有图像的整个数组。我需要弄清楚如何告诉（以编程方式）点击了哪个索引，或者只将子范围发送到模态。我是新手......如果我遗漏了什么或者有更好的方法来解决这个问题，欢迎任何帮助。
My HTML:
我的 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>
Instance and controller:
实例和控制器：
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);
};
This is basically how scope looks. The item index I need is buried deep and I need to know (programmatically) which one was clicked. I need the source off Index[0]
这基本上是范围的外观。我需要的项目索引被埋得很深，我需要（以编程方式）知道点击了哪个。我需要关闭 Index[0] 的源
$scope
--$parent
---$parent
----$photos
-----$$v
------data
-------0
--------Source
-------1
-------2
-------3
-------4
-------5
-------6
-------7
-------8
回答by rob
You could just do something like this.
你可以做这样的事情。
HTML
HTML
<img src="{{photo.source}}" class="thumbnail img-responsive" ng-click="open(photo)">
Javascript
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;
}
}
});
回答by Chi Row
I tried to post this as a comment but apparently it's too long. So, I will post it as an answer even though the correct answers have been given.
我试图将此作为评论发布，但显然它太长了。因此，即使已给出正确答案，我也会将其作为答案发布。
If your definition was
如果你的定义是
$scope.open = function (xyz) {...
then your resolve would be
那么你的决心将是
...photo: function(){ return xyz;}
You just got confused because you had used string name 'photo' as your function parameter. It has nothing to do with the scope. Also in your resolve definition, you could have called it anything instead of photo
您只是因为使用字符串名称 'photo' 作为函数参数而感到困惑。它与范围无关。同样在您的解析定义中，您可以将其称为任何名称而不是照片
...abc: function() {return xyz}
and then use abc in your
然后在你的
ModelInstanceCtrl(... , abc)
Again, there is no link to scope here. You are just passing along a value from
同样，这里没有指向范围的链接。你只是传递一个值
open(photo) to function (xyz) to ModalInstanceCtrl (... , abc)
Within the controller you can set it to anything you would like
在控制器中，您可以将其设置为您想要的任何内容
$scope.xxx = abc;
photo actually does not exist in the main scope since ng-repeat creates a local scope within the loop. photo is only visible within the loop and that's why you have to pass along to the controller through the function open() parameter. I am new to Angular and keeping track of scope lives has been challenging. Experts out there, please correct me if I am wrong.
photo 实际上并不存在于主作用域中，因为 ng-repeat 在循环中创建了一个局部作用域。photo 仅在循环中可见，这就是为什么您必须通过函数 open() 参数传递给控制器的原因。我是 Angular 的新手，跟踪范围生活一直具有挑战性。各位高手，如有不对请指正。
回答by MightySchmoePong
Can't you just pass the photo into open? I.e. ng-click="open(photo)"
你不能直接把照片传给open吗？即 ng-click="打开(照片)"
