Невозможно передать область в диалоговом окне в угловом

Question

Я показываю список изображений, используя 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 
     }); 
    }; 

Кто-нибудь есть какие-либо идеи, почему?

Я не смог понять это.

Answer 1

изменить свой открытый метод следующий ..

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

Это должно работать ...

Answer 2

Самый лучший способ, который работает для меня без рамки. просто использовать атрибут данных:

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