在 AngularJS 和 lightGallery 中加载更多按钮

Question

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

其中之一是 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>

"load more" 按钮它自己工作，但是它破坏了 lightGallery 本身。示例：http://cytex.nl/projects/jk-installaties/album2.php

然后我在

中找到了使 lightGallery 与 AngularJS 一起工作的解决方案

我试着把两者结合起来，但还是不行。现在 lightGallery 正常启动了，但是 "load more" 按钮没有任何作用！

示例：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 的回答当然是正确的。但是每次单击 "Load More" 按钮时，您还必须销毁 lightGallery 数据。这是在指令部分完成的。当然把“#fotoalbum”改成你自己的ID或者class。这是代码：

.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
          });
        });
      }
    }
  };
})

在 AngularJS 和 lightGallery 中加载更多按钮

Load more button in AngularJS and lightGallery

angularjs

lazy-loading

lightgallery