Angular LightBox不起作用。我做錯了什麼？

我花了3個小時在我的電腦上運行這個Demo。我究竟做錯了什麼？我只是複製和粘貼。也許參考文獻沒有正確放置？誰能幫忙？Angular LightBox不起作用。我做錯了什麼？

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

來源

2016-04-23 Octtavius

這可能是由於角度和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/

來源

2016-04-23 22:40:39

這裏是工作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>

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

});

來源

2016-04-23 22:51:35 Sampath

這是工作或沒有？ – Sampath

Angular LightBox不起作用。我做錯了什麼？

回答

相關問題