4つ以上のJSON「urls」値を持つangle-bootstrap-lightbox「無効な画像」

Question

thumbnailをクリックした後にangular-bootstrap-lightboxを使用してモーダルを開き、次にその画像のコレクションを通してnavigateをクリックしようとしています。

問題は、JSONファイルで定義されている最初の4セットの画像だけがモーダルを開き、意図したとおりに機能しているということです。それ以降は、Invalid imageというエラーが表示されます。

JSONの画像の順番を変更すると、以前のinvalid imageが有効になり、いずれかが「最後」になると同じエラーが表示されます。実際のイメージではありません。私はまた、別のイメージを追加したり、2つのセットを1つ追加してエラーを修正してもらうことができますが、必ずしもそうとは限りません。

コントローラに正しいインデックスが送信されていることを確認しました。その特定のオブジェクトインデックスのプロパティが有効であることを確認しました...私はこれに頭を傷つけています。 veは言った、最初の4つの仕事！だから...イメージセットの別のカップルを追加するだけで、違いは分かりません。

は、ここに私のコントローラです：

app.controller('testCtrl', ['$scope', 'Lightbox', '$http', function($scope, Lightbox, $http) { 

    $scope.images = []; 
    $scope.images.urls = []; 

    $http.get('data/images.json').success(function(data) { 

    for(i=0;i<data.images.length;i++) { 
     $scope.images[i] = data.images[i]; 
    } 

    });  

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

}]); 

JSON：

{ 
    "images":[ 
     { 
     "urls":[ 
      "img/DORG_01.jpg", 
      "img/DORG_02.jpg", 
      "img/DORG_03.jpg", 
      "img/DORG_04.jpg" 
     ], 
     "header":"", 
     "headerText":"", 
     "caption":"Optional caption", 
     "thumbUrl":"img/thumbs/DORG_01.jpg", 
     "templateUrl":"partials/template.html" 
     }, 
     { 
     "urls":[ 
      "img/LW_01.jpg", 
      "img/LW_02.jpg", 
      "img/LW_03.jpg", 
      "img/LW_04.jpg", 
      "img/LW_05.jpg", 
      "img/LW_06.jpg", 
      "img/LW_07.jpg" 
     ], 
     "header":"", 
     "headerText":"", 
     "caption":"Optional caption", 
     "thumbUrl":"img/thumbs/LW_01.jpg", 
     "templateUrl":"partials/template.html" 
     }, 
     { 
     "urls":[ 
      "img/WSJ_01.jpg", 
      "img/WSJ_02.jpg", 
      "img/WSJ_03.jpg", 
      "img/WSJ_04.jpg", 
      "img/WSJ_05.jpg", 
      "img/WSJ_06.jpg" 
     ], 
     "header":"", 
     "headerText":"", 
     "caption":"Optional caption", 
     "thumbUrl":"img/thumbs/WSJ_01.jpg", 
     "templateUrl":"partials/template.html" 
     }, 
     { 
     "urls":[ 
      "img/VW_01.jpg", 
      "img/VW_02.jpg", 
      "img/VW_03.jpg", 
      "img/VW_04.jpg", 
      "img/VW_05.jpg", 
      "img/VW_06.jpg", 
      "img/VW_07.jpg" 
     ], 
     "header":"", 
     "headerText":"", 
     "caption":"Optional caption", 
     "thumbUrl":"img/thumbs/VW_01.jpg", 
     "templateUrl":"partials/template.html" 
     }, 
     { 
     "urls":[ 
      "img/TP_01.jpg", 
      "img/TP_02.jpg", 
      "img/TP_03.jpg", 
      "img/TP_04.jpg" 
     ], 
     "header":"", 
     "headerText":"", 
     "caption":"Optional caption", 
     "thumbUrl":"img/thumbs/TP_01.jpg", 
     "templateUrl":"partials/template.html" 
     } 
    ] 
} 

とHTML部分：私のために見てみて喜んで誰にでも

<div> 
<h2>{{image.header}}</h2> 
<img ng-src="{{image.thumbUrl}}" class="img-thumbnail"> 

<p>{{image.headerText}}</p> 
<p><a class="btn btn-default" ng-click="openLightboxModal($index)" role="button">View details &raquo;</a>{{$index}}</p> 
</div> 

多くの感謝。

Answer 1

私は同様の問題がありました。問題はインデックス値にありました。あなたがLightbox.openModalのソースコードをチェックすると、あなたはそれが画像の配列内のインデックスを探しているわかります。私の場合は

Lightbox.openModal = function (newImages, newIndex, modalParams) { 
    Lightbox.images = newImages; 
    Lightbox.setImage(newIndex); 
... 
Lightbox.setImage = function (newIndex) { 
    if (!(newIndex in Lightbox.images)) { 
    throw 'Invalid image.'; 
    } 
... 

私は同じように、newIndexが値を渡しませんでした：Lightbox.openModal（画像）

$インデックスがopenModal関数の内部に入るときに有効であることを確認する必要があります。