角度ライトボックスは機能しません。何が間違っていますか？

私のコンピュータでこのデモを実行するのに3時間かかりました。私は間違って何をしていますか？私はちょうどコピーして貼り付けた。リファレンスが適切に配置されていない可能性がありますか？誰でも手伝ってもらえますか？角度ライトボックスは機能しません。何が間違っていますか？

<!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

これは、あなたがJSとCSSファイルを注文しなければならない道である作業Plunker

です。

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

角度ライトボックスは機能しません。何が間違っていますか？

答えて

関連する問題