代码之家 › 专栏 › 技术社区 › Octtavius

为什么html5lightbox不能与angular一起工作?

lightbox angularjs html jquery javascript

Octtavius · 技术社区 · 8 年前

我使用html5lightbox在lightbox中打开图像和pdf文件。现在我添加了角度。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工作???

2 回复 | 直到 8 年前

Sampath 8 年前

使用 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(控制器)

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