Bereich kann nicht an Dialog in Winkel übergeben werden

Question

Ich zeige eine Liste von Bildern mit Angular an.

Wenn ein Bild angeklickt wird, möchte ich einen Dialog mit dem Bild und weitere Informationen anzeigen.

Also wenn ich das modale öffne muss ich den Umfang oder zumindest das Bild übergeben.

Hinweis: Ich verwende ngDialog für das 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> 

Die Bilder werden angezeigt und der Dialog auf Klick geöffnet ...

aber irgendwie bin ich den Umfang in der Vorlage für den Zugriff auf nicht in der Lage.

Die folgenden Werke:

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

Hat warum eine Idee, jemand hat:

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

Aber das funktioniert nicht?

Ich konnte das nicht herausfinden.

Answer 1

Ihre offene Methode ändern zu folgenden ..

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

Dies sollte ... arbeiten

Answer 2

Die beste Art, die für mich funktioniert ohne Rahmen ist. nur Datenattribut verwenden:

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

und in der Template-Datei:

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