Question

我正在迭代一个图像模型，我希望能够点击图像名称并以模态显示图像。

使用这个现有代码我将如何实现这一目标？此代码适用于其他网址，因此，如果我将/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>'
            })

我需要做什么才能让我的代码以模态显示图像？

1 个答案: