Korzystanie z funkcji Infinite scroll in angularjs i jade

Question

Używam angularjs infinite scroll w mojej aplikacji internetowej na desce rozdzielczej. Mam jedną stronę z wieloma nieskończonymi przewijanymi widżetami. Ponieważ chcę mieć nieskończony zwój dla każdego z nich, postanowiłem zastosować dyrektywę this, ale jakoś nie działa zgodnie z oczekiwaniami. Chcę, aby nieskończony zwój działał w stosunku do paska przewijania wewnętrznej div, który używa idealnego scrollbar zamiast głównego okna przeglądarki. Mam wyszukiwane w google i znaleziono wiele wątków wyjaśniających 2 nowe zmienne, które mogą być używane do zmiany domyślnego zachowania: infinite-scroll-container i infinite-scroll-parent. Próbowałem obu, ale żaden z nich nie działa dla mnie. Myślę, że użycie idealnego paska przewijania tworzy problem.

kod Jade:

  .hor-col(ng-repeat="stream in socialStreams") 
       .box-body(style='min-height: 400px;') 
        perfect-scrollbar.timeline-scroller(wheel-propagation="true" wheel-speed="1" min-scrollbar-length="8" suppressScrollX="true" id="streamScroll-{{$index}}") 
         div(infinite-scroll="loadMorePosts(stream['streamId'], stream['endCursor'])", infinite-scroll-disabled="stream['infiniteScrollDisabled']", infinite-scroll-container="'#streamScroll-{{$index}}'") 

Ponieważ istnieje wiele widgetów, nie mogę używać tego samego identyfikatora lub klasy dla nieskończonej-scroll-pojemnika i dlatego zdecydowano się na generowanie dynamicznych id.

Jak mogę wstrzyknąć klasę dynamiczną wewnątrz kontenera nieskończenie przewijanego?

Dostaję następujący błąd:

Error: Failed to execute 'querySelector' on 'Document': '#streamScroll-{{$index}}' is not a valid selector.

PS: Widziałem następujące tematy, ale żaden z nich pokryte moje wymagania:

https://github.com/sroze/ngInfiniteScroll/issues/57

angularjs infinite scroll in a container

AngularJS - ng-repeat to assign/generate a new unique ID

Answer 1

nie jestem pewien, że trzeba nawiasy klamrowe wewnątrz parametru nieskończone przewijanie pojemnik . Należy zdać obliczalny ciąg w nim, więc ja proponuję spróbować tak:

infinite-scroll-container="'#streamScroll-' + $index" 

Przyczyna tego parametru, podobnie jak inni, nie trzeba interpolacji z klamrami, jest gotowy do podjęcia wyraz .

Answer 2

To nie jest faktyczna odpowiedź na problem, ale warto spróbować.
Mogę pokazać, jak możesz napisać własną dyrektywę nieskończonego przewijania. Oto kod:

HTML

<div infinite-scroll="loadSomeData()" load-on="scrollToTop"> 
...  
</div> 

dyrektywy:

app.directive('infiniteScroll', function() { 
     return { 
      restrict: 'A', 
      link: function ($scope, element, attrs) { 
       var raw = element[0]; 
       element.bind('scroll', function() { 
        if (attrs.loadOn === 'scrollToTop') { 
         if (raw.scrollTop === 0) { 
          $scope.$apply(attrs.infiniteScroll); 
         } 
        } else { 
         if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) { 
          $scope.$apply(attrs.infiniteScroll); 
         } 
        } 
       }); 
      } 
     }; 
    } 
); 

W kontrolera HTML:

$scope.loadSomeData = function() { 
    // Load some data here. 
}; 

Uwaga, load-on="scrollToTop" jest opcjonalne w HTML znacznik div. Dzieje się tak tylko wtedy, gdy podczas przewijania do góry chcesz wykonać funkcję loadSomeData(), w przeciwnym razie wykonasz tę funkcję podczas przewijania do dołu div.

Answer 3

Kątowy materiał ma bardzo przydatny nieskończony przewijanie.Myślę, że powinieneś spojrzeć na to Infinite Scroll