我正在使用Angular显示一个图片列表。
当用户点击某一张图片时,我想显示一个带有该图片以及更多信息的对话框。
因此,在打开模态框时,我需要传递$scope或至少传递一个图片参数。
注意:我正在使用ngDialog来实现弹出窗口。
application.controller('ImageController', function ImageController($scope, ImageService, ngDialog) {
$scope.model = {
images: [],
loading: false
}
var load = function () {
$scope.model.loading = true;
ImageService.GetList($scope.model.pages.instagram)
.success(function (data, status, headers, config) {
$scope.model.images = $scope.model.images.concat(data.Images)
})
.error(function (data, status, headers, config) { })
.finally(function () {
$scope.model.loading = false
});;
}
$scope.open = function (image) {
ngDialog.open({
template: '<p>my template {{image.Key}} </p>',
plain: true,
scope: $scope
});
};
load();
});
<div data-ng-app="Application" data-ng-controller="ImageController">
<div data-ng-repeat='image in model.images'>
<img src="{{image.Url}}" alt="" data-ng-click="open(image)"/>
</div>
点击后显示图像并打开对话框...
然而,不知何故,我无法在模板中访问作用域。
下面的内容是有效的:
$scope.open = function (image) {
ngDialog.open({
template: '<p>my template' + image.Key + '</p>',
plain: true
});
};
但是这个并不起作用:
$scope.open = function (image) {
ngDialog.open({
template: '<p>my template {{image.Key}} </p>',
plain: true,
scope: $scope
});
};
有没有人知道为什么?
我一直没能弄清楚这个问题。