我花了3个小时在我的电脑上运行这个Demo。我究竟做错了什么？我只是复制并粘贴。也许引用文献没有放置正确？有人可以帮忙吗？
<!DOCTYPE html>
<html lang="en" ng-app="demo6">
<head>
<meta charset="UTF-8">
<title>Angular light box</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="angular-bootstrap-lightbox.css">
</head>
<body>
<ul class="gallery gallery6" 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>
<script src="jquery-2.2.3.min.js"></script>
<script src="angular.min.js"></script>
<script src="angular-bootstrap-lightbox.js"></script>
<script src="controller.js"></script>
</body>
</html>
Controller .js:
angular.module('demo6', ['bootstrapLightbox']);
angular.module('demo6').controller('GalleryCtrl', function ($scope, Lightbox) {
$scope.images = [
{
'url': '02.png',
'thumbUrl': '02.png'
}
];
$scope.openLightboxModal = function (index) {
Lightbox.openModal($scope.images, index);
};
});
最佳答案
这可能是由于 Angular 和 jQuery 之间的冲突造成的。使用 jQuery 没有冲突一定可以解决您的问题。试试这个
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>
您可以在这里查看他们的完整 API:http://api.jquery.com/jQuery.noConflict/
关于javascript - Angular 灯箱不起作用。我做错了什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36816929/