LyteboxギャラリーがギャラリーでAngularJSページ設定を使用していません

Question

私はlyteboxを使用しています。ページ分割のために、私はAngularJSを使用します。ギャラリーの最初のページはうまく動作しますが、次のページの画像はlyteboxと接続されていません。私はその理由は、スクリプトlytebox.jsは最初のページの画像をロードページの後に発見するためだと思います。 Lyteboxを次のギャラリーページの後に更新する方法を教えてください。

HTMLや改ページのスクリプトをAngularJS：

<div class="row pictures"> 

    <div class="col-xs-3 picture td tac" ng-repeat="galeria in galerie"> 

     <?php if ($this->mySettings['lista_galerii']) : ?> 
      <a href="<?php echo $this->baseUrl; ?>/Galeria/nr/{{ galeria.id}}"> 
       <img ng-src="<?php echo $this->baseUrl; ?>/public/admin/podstrony/{{ galeria.img}}" alt="{{ galeria.galnazwa}}" /> 
      </a> 
      <a href="<?php echo $this->baseUrl; ?>/Galeria/nr/{{ galeria.id}}"> 
       <div class="nazwaGalerii">{{ galeria.galnazwa}}</div> 
      </a> 
     <?php else : ?> 
      <a ng-show="!galeria.length" href="<?php echo $this->baseUrl; ?>/public/admin/podstrony/{{ galeria.img}}" 
       class="lytebox" data-lyte-options="group:galeria titleTop:false navTop:true" 
       data-title="<?php echo htmlspecialchars(stripslashes($html['link'])); ?>" 
       data-description=""> 
       <img class="galeriaImg" ng-src="<?php echo $this->baseUrl; ?>/public/admin/podstrony/{{ galeria.img}}" 
        alt="<?php echo htmlspecialchars(stripslashes($html['link'])); ?>" 
        title="<?php echo htmlspecialchars(stripslashes($html['link'])); ?>" /> 
      </a> 
     <?php endif; ?> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-xs-12"> 
     <div class="dt center"> 
      <uib-pagination        
       total-items="noArticles" 
       max-size="10" 
       items-per-page="itemsPerPage" 
       ng-model="currentPage" 
       ng-change="pageChanged()"        
       previous-text="&lsaquo;" 
       next-text="&rsaquo;"        
       >        
      </uib-pagination> 
     </div> 
    </div> 
</div> 

<script type="text/javascript"> 
    app.controller('GaleriaController', ['$scope', '$filter', function ($scope, $filter) { 
      //   $scope.galerie = <?= json_encode($this->galerie); ?>; 
      $scope.zdjecia = <?= json_encode($this->galeria); ?>; 

      $scope.itemsPerPage = 12; 
      $scope.currentPage = 1; 
      $scope.noArticles = $scope.zdjecia.length; 

      $scope.todos = $scope.zdjecia; 

      $scope.figureOutTodosToDisplay = function() { 
       var begin = (($scope.currentPage - 1) * $scope.itemsPerPage); 
       var end = begin + $scope.itemsPerPage; 
       $scope.galerie = $scope.todos.slice(begin, end); 
      }; 

      $scope.figureOutTodosToDisplay(); 

      $scope.pageChanged = function() { 
       $scope.figureOutTodosToDisplay(); 
      }; 
      $scope.noArticles = $scope.zdjecia.length; 

      $scope.pagesNo = $scope.noArticles/$scope.itemsPerPage; 

      $scope.galerieGlownaMainpage = <?= json_encode($this->galerieStronaGlowna[0]); ?>; 

     }]); 
</script> 

Answer 1

私は自分でその問題を解決しました。 lyteboxを$scope.pageChangedに初期化して動作します。

forceLyteboxInit = function() { 
    setTimeout(
      function() 
      { 
       initLytebox(); 
      }, 500); 
} 

$scope.figureOutTodosToDisplay(); 

$scope.pageChanged = function() { 
    $scope.figureOutTodosToDisplay(); 
    forceLyteboxInit(); 
};