Sử dụng cuộn vô hạn trong angularj và ngọc bích

Question

Tôi đang sử dụng angularjs vô hạn scroll trong ứng dụng web bảng điều khiển của mình. Tôi có một trang duy nhất chứa nhiều tiện ích cuộn vô hạn. Vì tôi muốn có một cuộn vô hạn cho mỗi người trong số họ, tôi quyết định sử dụng chỉ thị this nhưng bằng cách nào đó nó không hoạt động như mong đợi. Tôi muốn cuộn vô hạn để làm việc liên quan đến thanh cuộn nội dung div trong đó sử dụng hoàn hảo scrollbar thay vì cửa sổ trình duyệt chính. Tôi đã tìm kiếm trên google và tìm thấy nhiều chủ đề giải thích 2 biến mới có thể được sử dụng để thay đổi hành vi mặc định: vô hạn-scroll-container và vô hạn-scroll-parent. Tôi đã thử cả hai nhưng không ai trong số họ làm việc cho tôi. Tôi nghĩ việc sử dụng thanh cuộn hoàn hảo đang tạo ra vấn đề.

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

Vì có nhiều widget, tôi không thể sử dụng cùng một id hoặc class là vĩnh viễn-scroll-container và do đó quyết định để tạo ra id động.

Tôi có thể tiêm một lớp động bên trong hộp chứa vô hạn cuộn như thế nào?

tôi nhận được lỗi sau:

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

T.B. Tôi đã thấy chủ đề sau đây nhưng không ai trong số họ bao phủ yêu cầu của tôi:

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

Tôi không chắc chắn mà bạn cần dấu ngoặc nhọn bên trong tham số vô hạn cuộn chứa . Bạn phải vượt qua chuỗi tính toán trong đó, vì vậy tôi sẽ đề nghị bạn thử nó như thế này: Nguyên nhân

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

tham số này, giống như những người khác, không cần phải suy với dấu ngoặc nhọn, nó đã sẵn sàng để có những biểu hiện .

Answer 2

Đây không phải là câu trả lời thực sự cho vấn đề, nhưng đáng để thử.
Tôi có thể chỉ cho bạn cách bạn có thể viết chỉ thị cuộn vô hạn của riêng bạn. Dưới đây là các mã:

HTML

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

Chỉ thị:

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

Trong bộ điều khiển của html:

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

ý rằng load-on="scrollToTop" là tùy chọn trong html thẻ div. Điều này chỉ xảy ra nếu bạn muốn thực hiện chức năng loadSomeData() khi cuộn lên trên, nếu không nó sẽ thực hiện chức năng khi cuộn xuống dưới cùng của div.

Answer 3

Vật liệu góc có cuộn vô hạn hữu ích.Tôi nghĩ bạn nên nhìn vào nó Infinite Scroll