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

我自己解决了那个问题。我在$scope.pageChanged中初始化了lytebox，它可以工作了。

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

$scope.figureOutTodosToDisplay();

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