Question

对于displayiny gallery我使用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

我自己解决了这个问题。我在NSString *urlString = [NSString stringWithFormat:@"http://maps.googleapis.com/maps/api/geocode/json?latlng=%f,%f&sensor=false&language=en",location.coordinate.latitude, location.coordinate.longitude];中初始化了lytebox，但它确实有效。

$scope.pageChanged

Lytebox画廊未与画廊中的AngularJS分页合作

1 个答案: