[angularjs]为什么 html5lightbox 不能与角吗?

发布时间: 2017/4/16 1:09:05
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我使用 html5lightbox 在灯箱中打开图像和 pdf 文件。现在我添加 angular.js,当点击一个链接,它带我去 enother 页而不是在一个灯箱中打开它

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 工作???

解决方法 1:

使用角引导灯箱。只是令人敬畏。

这里是工作呆瓜

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

演示

赞助商