javascript - 为什么 html5lightbox 不适用于 Angular ？

Question

我使用 html5lightbox 在灯箱中打开图像和 pdf 文件。现在我添加了 angular.js，当点击一个链接时，它会将我带到另一个页面而不是在灯箱中打开它

var app =  angular.module('MyApp', []);

var tiles =
[
    {
        class: "fileTile",
        link: "images/9-credit-1.jpg",
        header: "ToDo List",
        content: "PDF File contains information about SAP sales and customers"
    },
    {
        class: "videoTile",
        link: "https://www.youtube.com/watch?v=Nfq3OC6B-CU",
        header: "Fiori Tutorial",
        content: "This Video contains information about SAP sales and customers"
    },
    {
        class: "fileTile",
        link: "images/canberra_hero_image_JiMVvYU.jpg",
        header: "A Random Image",
        content: "PDF File contains information about SAP sales and customers"
    },
    {
        class: "fileTile",
        link: "images/national-basketball-association-scoring-big-with-real-time-statistics-and-sap-hana.pdf?iframe=true",
        header: "National Basketboal Team",
        content: "PDF File contains information about SAP sales and customers"
    }
];


  app.controller("DisplayController", function($scope, $http){
     $scope.tiles = tiles;
  });

我该怎么做才能使 html5lightbox 正常工作？？？

Answer 1

使用angular-bootstrap-lightbox .简直太棒了。

这是工作 Plunker

html

<ul ng-controller="GalleryCtrl">
  <li ng-repeat="image in images">
    <a ng-click="openLightboxModal($index)">
      <img ng-src="{{image.thumbUrl}}" class="img-thumbnail">
    </a>
  </li>
</ul>

JS( Controller )

angular.module('app').controller('GalleryCtrl', function ($scope, Lightbox) {
  $scope.images = [
    {
      'url': '1.jpg',
      'caption': 'Optional caption',
      'thumbUrl': 'thumb1.jpg' // used only for this example
    },
    {
      'url': '2.gif',
      'thumbUrl': 'thumb2.jpg'
    },
    {
      'url': '3.png',
      'thumbUrl': 'thumb3.png'
    }
  ];

  $scope.openLightboxModal = function (index) {
    Lightbox.openModal($scope.images, index);
  };
});

DEMO