Unable to pass dialog area in angular

Question

I am showing a list of images using Angular.

When I click on the image, I want to display a dialog with the image and more detailed information.

So, when I open the modality, I need to convey the scope, or at least the image.

Note. I am using ngDialog for a popup.

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> 

Images are displayed and a dialog opens when you click ...

However, somehow I cannot access the area inside the template.

The following works:

  $scope.open = function (image) { ngDialog.open({ template: '<p>my template' + image.Key + '</p>', plain: true }); }; 

But this does not work:

  $scope.open = function (image) { ngDialog.open({ template: '<p>my template {{image.Key}} </p>', plain: true, scope: $scope }); }; 

Does anyone know why?

I could not figure it out.

Answer 1

change your public method to the following.

  $scope.open = function (image) { var newScope = $scope.$new(); newScope.image = image; ngDialog.open({ template: '<p>my template {{image.Key}} </p>', plain: true, scope: newScope }); }; 

This should work ...

Answer 2

The best way that works for me has no limits. just use the data attribute:

  $scope.open = function (image) { ngDialog.openConfirm({ template: 'views/alertTemplate.html' showClose: false, data: { image: image, } }); } 

and in the template file:

 <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>