javascript - Lytebox Gallery无法与Gallery中的AngularJS分页一起使用

对于displayinyy画廊，我使用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>

最佳答案

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

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

$scope.figureOutTodosToDisplay();

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