Загрузить больше кнопок в 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>

Кнопка "загрузить больше" сама по себе работала, однако сама сломала lightGallery. Пример: http://cytex.nl/projects/jk-installaties/album2.php

Тогда я нашел решение для того, чтобы lightGallery работала с AngularJS в этом вопросе Stackru

Я пытался объединить два, но это все еще не работает. Теперь 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

Для других, кто столкнулся с этой проблемой:

Ответ Рамина Исфахани, конечно, правильный. Но вы также должны уничтожать данные lightGallery каждый раз, когда нажимаете кнопку "Загрузить еще". Это сделано в директивной части. Конечно, измените "#fotoalbum" на свой собственный идентификатор или класс. Это код:

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