Không thể chuyển phạm vi cho hộp thoại trong góc

Question

Tôi hiển thị danh sách hình ảnh bằng Angular.

Khi hình ảnh được nhấp, tôi muốn hiển thị hộp thoại có hình ảnh và thông tin khác.

Vì vậy, khi mở phương thức, tôi cần phải vượt qua phạm vi hoặc ít nhất là hình ảnh.

Lưu ý: Tôi đang sử dụng ngDialog cho cửa sổ bật lên.

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> 

Các hình ảnh được hiển thị và hộp thoại được mở ra trên nhấp chuột ...

Tuy nhiên, bằng cách nào đó, tôi không thể truy cập vào phạm vi bên trong mẫu.

Các công trình sau đây:

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

Nhưng điều này không làm việc:

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

Có ai có bất kỳ ý tưởng tại sao?

Tôi chưa thể xác định điều này.

Answer 1

thay đổi phương thức mở của bạn để sau ..

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

này nên làm việc ...

Answer 2

Cách tốt nhất làm việc cho tôi là không có phạm vi. chỉ cần sử dụng thuộc tính dữ liệu:

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

và trong mẫu tập tin của bạn:

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