为什么html5lightbox不适用于angular

Why html5lightbox doesn't work with angular?

本文关键字：angular 适用于 不适用 html5lightbox 为什么      更新时间：2023-09-26

我使用html5lightbox在灯箱中打开图像和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工作???

使用角度引导灯箱。简直太棒了。

这是工作普伦克

.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);
  };
});

演示

你确定有吗 

data-lightbox

像标识符一样，这意味着此链接将显示在灯箱中。如果我真的记得，你必须为灯箱之类的代码提供这样的属性。

或者你能选择你试图使用的角度模板/html。

问候

相关文章：