Verwenden von Infinite Scroll in Angularjs und Jade

Question

Ich benutze angularjs unendlich scroll in meiner Dashboard Web App. Ich habe eine einzelne Seite, die mehrere unbegrenzt scrollbare Widgets enthält. Da ich für jedes von ihnen eine unendliche Schriftrolle haben möchte, entschied ich mich dafür, this Direktive zu verwenden, aber irgendwie funktioniert es nicht wie erwartet. Ich möchte, dass die unendliche Bildlauffunktion relativ zur inneren Inhalts-div-Bildlaufleiste funktioniert, die das perfekte scrollbar anstelle des Hauptbrowserfensters verwendet. Ich habe auf Google gesucht und mehrere Threads gefunden, die zwei neue Variablen erklären, die verwendet werden können, um das Standardverhalten zu ändern: infinite-scroll-container und infinite-scroll-parent. Ich habe beides versucht, aber keiner arbeitet für mich. Ich denke, die Verwendung von Perfect-Scrollbar schafft das Problem.

Jade Code:

  .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}}'") 

Da es mehrere Widgets sind, kann ich nicht gleiche ID oder Klasse für unendliche-Scroll-Container verwenden und daher beschlossen, dynamisch-ID zu erzeugen.

Wie kann ich eine dynamische Klasse in einen Infinite-Scroll-Container injizieren?

Ich erhalte folgende Fehlermeldung:

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

P. S. Ich habe folgende Themen gesehen, aber keiner von ihnen bedeckt meine Forderung:

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

Ich bin nicht sicher, dass Sie geschweiften Klammern innerhalb der unendlichen-Scroll-Container-Parameter benötigen . Sie sollten darin berechenbare String, also werde ich vorschlagen, dass Sie es so versuchen:

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

Ursache dieser Parameter, wie andere auch, brauchen keine Interpolation mit geschweiften Klammern, ist es bereit, um den Ausdruck zu nehmen .

Answer 2

Es ist keine tatsächliche Antwort auf das Problem, aber es ist einen Versuch wert.
Ich kann Ihnen zeigen, wie Sie Ihre eigene infinite-scroll-Direktive schreiben können. Hier ist der Code:

HTML

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

Die Richtlinie:

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

In der Steuerung des html:

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

Beachten Sie, dass load-on="scrollToTop" in den HTML-Code ist optional div tag. Dies ist nur dann der Fall, wenn Sie beim Scrollen nach oben die Funktion loadSomeData() ausführen möchten. Andernfalls wird die Funktion ausgeführt, wenn Sie zum unteren Rand des div blättern.

Answer 3

Eckiges Material hat ziemlich brauchbare unendliche Scroll.Ich denke, du solltest einen Blick darauf werfen Infinite Scroll