javascript - 灯箱正在下载图片而不是显示图片

Question

我正在使用 angular、bootstrap 和 lightbox。
我为灯箱添加了以下 js 和 css 文件:

<script src="js/lightbox.min.js"></script>
<script src="js/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="css/lightbox.css">

然后我添加了以下代码:

<a href="{{data.ImageUrl}}" data-lightbox="image-1" data-title="My caption"><button ng-click="viewImage(message)">view</button></a>

就像他们在这里所说的那样:lightbox2 但这并不像我想要的那样工作。当我点击它时它会显示 View 按钮。它会显示缩放图像，然后当我再次单击它时它会在灯箱中显示该图像。
我还尝试了提到的其他方法 here .我将此添加到我的代码中

<a href="{{data.imageUrl}}" rel="lightbox" ><button ng-click="viewImage(message)">view</button></a>

即便如此，效果也是一样的。
我是 Angular 和上面提到的所有东西的新手。 {{data.imageUrl}} 包含图像的 url。
我尝试了很多让它工作。但这仍然行不通。有时它什么都不显示，有时它显示缩放图像，然后当我单击它时它在灯箱中显示该图像，这不是我想要的，有时它只是下载图像。(当我对代码)
当我点击查看按钮时，我想要那个。它应该弹出一个带有 {{data.message}} 中提到的图像的灯箱。 有人可以帮我弄这个吗。我想知道我是否遗漏了什么或者所做的完全错误。
viewImage(message) 是一个 Controller ，它将消息作为输入并将 data.imageUrl 的值设置为我要显示的 imageUrl
我应该如何使用灯箱？谢谢 如果有人可以帮助我。十分感谢大家。

[编辑 1]: 我正在添加我的代码，以便它可以帮助你们找到我犯的错误。我最需要您的反馈。谢谢大家。
这是所有编辑后我当前的代码: HTML代码:

<a href="{{message.securePicUrl}}" rel="lightbox" title="my caption">View</a>


<!-- second version 
<a href="{{message.securePicUrl}}" data-lightbox="image-1" data-title="My caption">View</a>
-->

消息包含有关消息的详细信息。 {{message.securePicUrl}} 是我要显示的图像的 url。

我以前的代码看起来像这样:

$scope.showFullImage = function(message) {
        console.log("Show Full Image : ");
        console.log(message);
        var modalInstance = $modal.open({
            template: '<img src="{{details.securePicUrl}}">',
            controller: 'displayImagePopup',
            size: 'lg',
            resolve:{
                messageDetails: function(){
                    return message;
                }
            }
        });
    }


//.... some code here....

//controller
myApp.controller('displayImagePopup', function ($scope, $modalInstance, messageDetails) {
    $scope.details = messageDetails;
    $scope.imageCaption = "";
    if (messageDetails.picCaption)
        $scope.imageCation = messageDetails.picCaption;
    console.log(messageDetails);
    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
});

<!-- code to display the image -->

<a class="pos-abs btn-view btn btn-primary btn-lg" type="button" ng-click="$event.stopPropagation(); showFullImage(message)" ng-attr-data-lightbox="{(message.messageType == 3 || message.messageType == 5) ? message.messageId:null}">View</a>


<!-- some code here -->

 <!-- full size image viewer-->
    <script type="text/ng-template" id="displayImagePopup.html">
        <div class="modal-header">
        </div>
        <div class="modal-body">
            <img ng-src="{{details.securePicUrl}}" alt="{{imageCaption}}">
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="cancel()">Close</button>
        </div>
    </script>

第二个片段是显示包含图像的模态的片段。但我想在灯箱中显示图像，所以我更改了我的代码(你可以看到第一个片段)
[edit 1]:添加了更多代码片段。

Answer 1

我没有用过 lightbox，但是，如果你想将 href 与 angularjs 绑定(bind)，你应该这样做:

<a ng-href="{{some-var-inscope}}" ...>