Question

我花了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);
    };
});

Answer 1

这可能是由于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/

Answer 2

这是工作Plunker

这是您订购JS和CSS文件的方式。

<强> HTML

<!doctype html>
<html ng-app="demo1">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
    <script src="angular-bootstrap-lightbox.js"></script>
    <script src="example.js"></script>

    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="angular-bootstrap-lightbox.css">
    <link rel="stylesheet" href="style.css">
</head>
  <body>

<ul class="gallery gallery1" 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>
  </body>
</html>

<强> JS

angular.module('demo1', ['bootstrapLightbox']);

angular.module('demo1').controller('GalleryCtrl', function ($scope, Lightbox) {
  $scope.images = [
    {
      'url': 'https://farm6.staticflickr.com/5830/20552523531_e1efec8d49_k.jpg',
      'thumbUrl': 'https://farm6.staticflickr.com/5830/20552523531_ef720cd2f1_s.jpg',
      'caption': 'This image has dimensions 2048x1519 and the img element is scaled to fit inside the window.'
    },
    {
      'url': 'https://farm8.staticflickr.com/7300/12807911134_ff56d1fb3b_b.jpg',
      'thumbUrl': 'https://farm8.staticflickr.com/7300/12807911134_ff56d1fb3b_s.jpg'
    },
    {
      'url': 'https://farm1.staticflickr.com/400/20228789791_52fb84917f_b.jpg',
      'thumbUrl': 'https://farm1.staticflickr.com/400/20228789791_52fb84917f_s.jpg',
      'caption': 'The left and right arrow keys are binded for navigation. The escape key for closing the modal is binded by AngularUI Bootstrap.'
    },
    {
      'url': 'https://farm1.staticflickr.com/260/20185156095_912c2714ef_b.jpg',
      'thumbUrl': 'https://farm1.staticflickr.com/260/20185156095_912c2714ef_s.jpg'
    },
    {
      'url': 'https://farm6.staticflickr.com/5757/20359334789_57316968ed_m.jpg',
      'thumbUrl': 'https://farm6.staticflickr.com/5757/20359334789_57316968ed_s.jpg',
      'caption': 'Default minimum modal dimensions (400x200) apply for this image (240x95).'
    },
    {
      'url': 'https://farm1.staticflickr.com/359/18741723375_28c89372d7_c.jpg',
      'thumbUrl': 'https://farm1.staticflickr.com/359/18741723375_28c89372d7_s.jpg'
    },
    {
      'url': 'https://farm6.staticflickr.com/5606/15425945368_6f6ae945fc.jpg',
      'thumbUrl': 'https://farm6.staticflickr.com/5606/15425945368_6f6ae945fc_s.jpg'
    },
    ];

  $scope.openLightboxModal = function (index) {
    Lightbox.openModal($scope.images, index);
  };

});

Angular LightBox不起作用。我做错了什么？

2 个答案: