कोणीय स्क्रॉल और जेड

Question

में अनंत स्क्रॉल का उपयोग करके मैं अपने डैशबोर्ड वेब ऐप में angularjs अनंत scroll का उपयोग कर रहा हूं। मेरे पास एक एकल पृष्ठ है जिसमें एकाधिक अनंत स्क्रॉल करने योग्य विजेट हैं। चूंकि मैं उनमें से प्रत्येक के लिए एक अनंत स्क्रॉल करना चाहता हूं, इसलिए मैंने this निर्देश का उपयोग करने का निर्णय लिया लेकिन किसी भी तरह से यह अपेक्षित काम नहीं कर रहा है। मैं अनंत स्क्रॉल को आंतरिक सामग्री div scrollbar के सापेक्ष काम करने के लिए चाहता हूं जो मुख्य ब्राउज़र विंडो के बजाय सही scrollbar का उपयोग करता है। मैंने Google पर खोज की है और 2 नए चरों को समझाते हुए कई धागे पाए हैं जिनका उपयोग डिफ़ॉल्ट व्यवहार को बदलने के लिए किया जा सकता है: अनंत-स्क्रॉल-कंटेनर और अनंत-स्क्रॉल-पैरेंट। मैंने दोनों की कोशिश की लेकिन उनमें से कोई भी मेरे लिए काम नहीं कर रहा है। मुझे लगता है कि सही-स्क्रॉलबार का उपयोग समस्या पैदा कर रहा है।

जेड कोड:

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

चूंकि अनेक विगेट्स हैं, मैं अनंत-पुस्तक-कंटेनर के लिए एक ही आईडी या वर्ग का उपयोग नहीं कर सकते हैं और इसलिए गतिशील आईडी उत्पन्न करने के लिए फैसला किया।

मैं अनंत-स्क्रॉल-कंटेनर के अंदर एक गतिशील कक्षा कैसे इंजेक्ट कर सकता हूं?

मैं हो रही है निम्न त्रुटि:

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

पी.एस. मैं निम्नलिखित धागे देखा है लेकिन उनमें से कोई मेरी आवश्यकता कवर:

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

मुझे यकीन है कि आप अनंत-स्क्रॉल कंटेनर पैरामीटर के अंदर घुंघराले ब्रेसिज़ की जरूरत नहीं कर रहा हूँ । आप इसे में शुमार कर सका स्ट्रिंग पास करना चाहिए, तो मैं आप इसे इस तरह की कोशिश करने का सुझाव देंगे:

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

कारण इस पैरामीटर, दूसरों की तरह, घुंघराले ब्रेसिज़ के साथ प्रक्षेप की जरूरत नहीं है, यह अभिव्यक्ति लेने के लिए तैयार है ।

Answer 2

यह समस्या का वास्तविक उत्तर नहीं है, लेकिन यह कोशिश करने लायक है।
मैं आपको दिखा सकता हूं कि आप अपना अनंत-स्क्रॉल निर्देश कैसे लिख सकते हैं। कोड यह रहा:

एचटीएमएल

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

निर्देश:

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

html के नियंत्रक में:

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

सूचना है कि load-on="scrollToTop" html में वैकल्पिक है div टैग यह तभी होता है जब आप शीर्ष पर स्क्रॉल करते समय loadSomeData() फ़ंक्शन निष्पादित करना चाहते हैं, अन्यथा यह div के नीचे स्क्रॉल करते समय फ़ंक्शन निष्पादित करेगा।

Answer 3

कोणीय सामग्री में बहुत उपयोगी अनंत स्क्रॉल है।मुझे लगता है कि आपको इसे देखना चाहिए Infinite Scroll