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

は、それから私は、私は2を結合しようとしたが、それはまだ動作しませんthis StackOverflow question

にAngularJSとlightGallery作業を行うための解決策を見つけました。今度は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

：

ラミンEsfahaniの答えは、もちろん正しいです。しかし、 "Load More"ボタンがクリックされる度にlightGalleryデータを破棄する必要があります。これは指示部分で行われます。もちろん、あなたのIDやクラスに "#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 
      }); 
     }); 
     } 
    } 
    }; 
})