Question

我正在使用角度，自举和灯箱我为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 但这不符合我的要求。单击它时显示视图按钮。它显示带缩放的图像，然后当我再次单击它时它会在灯箱中显示该图像我还尝试了其他提到here的方法。我把它添加到我的代码中

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

即便如此也是如此。
我是角色和上面提到的所有东西的新手。 {{data.imageUrl}}包含图片的网址。我尝试了很多工作。但这仍然无效。有时候它什么都不显示，有时它会显示缩放图像，然后当我点击它时，它会在灯箱中显示那个不是我想要的图像，有时它只是下载图像。（当我对图像进行任何更改时会发生这种情况。码）
当我点击视图按钮时，我希望这样。它应该使用{{data.message}}中提到的图像弹出一个lightBox。有人可以帮我弄这个吗。我想知道我错过了什么或做了什么是完全错误的。
viewImage（message）是一个控制器，它将消息作为输入，并将data.imageUrl的值设置为我要显示的imageUrl
我该如何使用灯箱？谢谢如果有人可以帮助我。十分感谢大家。

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

＆＃13;

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

＆＃13;

该消息包含有关消息的详细信息。 {{message.securePicUrl}}是我要显示的图片的网址。

我之前的代码看起来像这样：

＆＃13;

$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');
    };
});

＆＃13;

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

＆＃13;

第二个片段是显示包含图像的模态的片段。但是我想在灯箱中显示图像，所以我对代码进行了更改（你可以看到第一个代码段）
[编辑1] ：添加了更多代码段。

Answer 1

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

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

Lightbox正在下载图像而不是显示图像

1 个答案: