我需要做些什麼才能讓我的代碼在模態中顯示圖像？

Question

我在遍歷一個Images模型，我希望能夠點擊圖像名稱並以模態顯示圖像。

使用這個現有的代碼我將如何實現這一目標？此代碼適用於其他網址，因此如果我將/contact傳入openPopup函數，它將顯示正確的網頁。

圖像來自單獨的域，因此不在同一臺服務器上。

<div id="owl-carousel" class="owl-carousel" data-popup> 
    @foreach (var image in Model.Images) 
    { 
     <span ng-click="openPopup('http://url/to/image.jpg')">@image.Name</span><br /> 
        <div> 
         <span>@image.Name</span> 
         <img src="@image.ImageUrl" alt="" /> 
        </div> 
     } 
    </div> 


.directive('modal',function(){ 
    return{ 
     restrict:'EA', 
     transclude:true, 
     scope:true, 
     templateUrl:'modal.tpl.html' 

    } 
}) 


.directive('popup',function(){ 
    return{ 
     restrict:'EA', 
     scope:true, 
     controller: 
     ['$scope','$modal', 
     function($scope,$modal){ 
      $scope.openPopup=function(url){ 
       $modal.open({ 
        templateUrl:url 
       }) 
      } 

     }] 
    } 
}) 

Answer 1

我整理這個改變這一點：

  $modal.open({ 
       templateUrl:url 
      }) 

這樣：

  $modal.open({ 
       template: '<div>inline modal content</div>' 
      })