为什么 html5lightbox 不适用于 angular?
Why html5lightbox doesn't work with angular?
我使用 html5lightbox 在灯箱中打开图片和 pdf 文件。现在我添加了 angular.js,当单击 link 时,它会将我带到另一个页面而不是在灯箱中打开它
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 正常工作???
你确定有
data-lightbox
类似标识符,这意味着此 link 将显示在灯箱中..
如果我没记错的话,你必须为类似代码的灯箱提供这样的属性。
或者你可以 whare angular template/html 你正试图用于什么。
此致
使用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);
};
});
我使用 html5lightbox 在灯箱中打开图片和 pdf 文件。现在我添加了 angular.js,当单击 link 时,它会将我带到另一个页面而不是在灯箱中打开它
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 正常工作???
你确定有
data-lightbox
类似标识符,这意味着此 link 将显示在灯箱中.. 如果我没记错的话,你必须为类似代码的灯箱提供这样的属性。
或者你可以 whare angular template/html 你正试图用于什么。
此致
使用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);
};
});