无法将范围传递给 angular 中的对话框
Not able to pass scope to dialog in angular
我正在使用 Angular 显示图像列表。
单击图片时,我想显示一个包含该图片和更多信息的对话框。
所以当打开模式时我需要传递范围,或者至少是图像。
注意:我使用 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
});
};
有人知道为什么吗?
我还没弄明白。
将您的打开方式更改为以下..
$scope.open = function (image) {
var newScope = $scope.$new();
newScope.image = image;
ngDialog.open({
template: '<p>my template {{image.Key}} </p>',
plain: true,
scope: newScope
});
};
这应该有效...
最适合我的方法是没有范围。只需使用数据属性:
$scope.open = function (image) {
ngDialog.openConfirm({
template: 'views/alertTemplate.html'
showClose: false,
data: {
image: image,
}
});
}
并在您的模板文件中:
<div class="alert-dialog-container">
<div class="alert-dialog-body">
<p ng-bind-html="ngDialogData.image"></p>
</div>
<div class="alert-dialog-footer">
<button ng-click="confirm()">OK</button>
</div>
</div>
我正在使用 Angular 显示图像列表。
单击图片时,我想显示一个包含该图片和更多信息的对话框。
所以当打开模式时我需要传递范围,或者至少是图像。
注意:我使用 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
});
};
有人知道为什么吗?
我还没弄明白。
将您的打开方式更改为以下..
$scope.open = function (image) {
var newScope = $scope.$new();
newScope.image = image;
ngDialog.open({
template: '<p>my template {{image.Key}} </p>',
plain: true,
scope: newScope
});
};
这应该有效...
最适合我的方法是没有范围。只需使用数据属性:
$scope.open = function (image) {
ngDialog.openConfirm({
template: 'views/alertTemplate.html'
showClose: false,
data: {
image: image,
}
});
}
并在您的模板文件中:
<div class="alert-dialog-container">
<div class="alert-dialog-body">
<p ng-bind-html="ngDialogData.image"></p>
</div>
<div class="alert-dialog-footer">
<button ng-click="confirm()">OK</button>
</div>
</div>