在AngularJS和lightGallery中加载更多按钮

Question

我在网站上使用lightGallery，我想在图库页面上添加一个“加载更多”按钮，主要是为了更快地在手机上加载。 我找到了各种方法并进行了尝试。 它们中的大多数不起作用和/或不适合我根据要求加载元素的需要。

其中之一是AngularJS：

var DemoApp = angular.module("DemoApp", []);
DemoApp.controller("DemoController",

function DemoController($scope) {
    $scope.quantity = 0;
    $scope.temp = [];
    $scope.loadMore = function () {
        for (i = $scope.quantity; i <= $scope.quantity + 1; i++) {
            $scope.temp.push($scope.images[i]);
        }
        $scope.quantity = i;
    }

    $scope.images = [{
        "src": "https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13244856_238092939903469_3778800896503555327_n.jpg?oh=e539748b060ba0cb43852314e2fdef0b&oe=57F01511"
    }, {
        "src": "https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13263891_238096316569798_4073904852035872297_n.jpg?oh=91a76b3515ac628706b912fdd3e9a346&oe=585C3DD1"
    }, {
        "src": "https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13260007_238096336569796_6324932140560503740_n.jpg?oh=1795ba25c4604dced3cdcc91b9729cc7&oe=5820EE5A"
    }, {
        "src": "https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/12871473_238096353236461_8115646425269026926_n.jpg?oh=b8958326d24a1a649e6a40adf29b062b&oe=582BFD38"
    }, {
        "src": "https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13256520_238096376569792_9057528716929719317_n.jpg?oh=a6bc66f75992c88260ae35bd4dbc9ff1&oe=5856F934"
    }, {
        "src": "https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13254297_238096389903124_1429633590050411734_n.jpg?oh=5e8c94a0b6a77dea110704a5727e0ee5&oe=5819B551"
    }, {
        "src": "https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13267713_238096416569788_8740461856631991826_n.jpg?oh=739e3268996e498f65867b314265250b&oe=585E4C93"
    }];

    $scope.loadMore();
});

这是我的HTML标记：

<div class="col-xs-12">
<div ng-app="DemoApp" ng-controller="DemoController">
<div id="fotoalbum" class="col-thumb-wrap">

<div class="col-thumb" ng-repeat="image in temp" data-src="{{image.src}}">
<a href="{{image.src}}">
<i class="thumb" style="background-image: url({{image.src}});"></i>
</a>
</div>

</div>
<button class="btn btn-default" ng-click="loadMore()">Ik wil meer</button>
</div>
</div>

它可以自行操作“加载更多”按钮，但是它却破坏了l​​ightGallery本身。 示例： http ： //cytex.nl/projects/jk-installaties/album2.php

然后我在这个StackOverflow问题中找到了使lightGallery与AngularJS一起使用的解决方案

我试图将两者结合起来，但仍然无法正常工作。 现在，lightGallery已启动，但是“加载更多”按钮没有任何作用！

示例： http ： //cytex.nl/projects/jk-installaties/album1.php

var DemoApp = angular.module('DemoApp', []);
DemoApp.controller('DemoController',
function DemoController($scope, $sce) {  
    $scope.total = 0;
  $scope.temp = [];
  $scope.loadMore = function () {
    for (x = $scope.total; x <= $scope.total + 1; x++) {
      $scope.temp.push($scope.photos[x]);
    }
    $scope.total = x;
  }

    $scope.photos = [{
        fullres: 'https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13244856_238092939903469_3778800896503555327_n.jpg?oh=e539748b060ba0cb43852314e2fdef0b&oe=57F01511'
    }, {
        fullres: 'https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13263891_238096316569798_4073904852035872297_n.jpg?oh=91a76b3515ac628706b912fdd3e9a346&oe=585C3DD1'
    }, {
        fullres: 'https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13260007_238096336569796_6324932140560503740_n.jpg?oh=1795ba25c4604dced3cdcc91b9729cc7&oe=5820EE5A'
    }, {
        fullres: 'https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/12871473_238096353236461_8115646425269026926_n.jpg?oh=b8958326d24a1a649e6a40adf29b062b&oe=582BFD38'
    }, {
        fullres: 'https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13256520_238096376569792_9057528716929719317_n.jpg?oh=a6bc66f75992c88260ae35bd4dbc9ff1&oe=5856F934'
    }, {
        fullres: 'https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13254297_238096389903124_1429633590050411734_n.jpg?oh=5e8c94a0b6a77dea110704a5727e0ee5&oe=5819B551'
    },{
        fullres: 'https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13267713_238096416569788_8740461856631991826_n.jpg?oh=739e3268996e498f65867b314265250b&oe=585E4C93'
    }];

  $scope.loadMore();

    for (var i = 0; i < $scope.photos.length; i++) {
        $scope.photos[i].fullres = $sce.trustAsResourceUrl($scope.photos[i].fullres);
    }
})
.directive('lightgallery', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      if (scope.$last) {
        element.parent().lightGallery({
            showThumbByDefault: false
        });
      }
    }
  };
});

我是AngularJS的新手，如果这是一个非常愚蠢的问题，我们感到抱歉。 你们可以帮忙找出问题所在，也许还可以找到解决该问题的指针吗？

Answer 1

将此代码片段追加到loadMore函数的最后一行：

for (var i = 0; i < $scope.photos.length; i++) {
        $scope.photos[i].fullres =      $sce.trustAsResourceUrl($scope.photos[i].fullres);
    }

每次向数组添加项目时都应运行此部分，这意味着应在每次函数loadMore触发时运行此部分。 希望这会有所帮助。 问候。

Answer 2

对于其他遇到此问题的人：

Ramin Esfahani的答案当然是正确的。 但是，每当单击“加载更多”按钮时，您还必须销毁lightGallery数据。 这是在指令部分完成的。 当然，将“ #fotoalbum”更改为您自己的ID或类。 这是代码：

.directive('lightgallery', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      if (scope.$last) {
        element.parent().lightGallery({
            showThumbByDefault: false
        });
        $('#LoadMore').on('click', function(){
          $('#fotoalbum').data('lightGallery').destroy('true');
          $('#fotoalbum').lightGallery({
            showThumbByDefault: false
          });
        });
      }
    }
  };
})