2015-11-30 20 views
6

मैं ngInfiniteScroll काम करने की कोशिश कर रहा हूं लेकिन व्यर्थ में - Plunker। स्क्रॉल इवेंट केवल पृष्ठ लोड पर ट्रिगर होता है, उसके बाद कुछ भी इसे ट्रिगर नहीं करता है। क्या कोई कृपया कुछ प्रकाश डाल सकता है।ngInfiniteScroll काम नहीं कर रहा

मैं कोशिश की विभिन्न संयोजनों, कोई भी काम:

infinite-scroll='loadMore()' infinite-scroll-distance='2' infinite-scroll-container="'#list-wrapper'" 

infinite-scroll='loadMore()' infinite-scroll-distance='2' infinite-scroll-parent 

infinite-scroll='loadMore()' infinite-scroll-distance='2' 

HTML:

<body ng-app="app" ng-controller="listController"> 
     <div id="list-wrapper"> 
      <div class="list" infinite-scroll='loadMore()' 
     infinite-scroll-distance='2' 
     infinite-scroll-container="'#list-wrapper'"> 
      <div class="header"> 

      </div> 

      <div class="list-table" > 
       <table class="table"> 
        <tbody> 
         <tr ng-repeat="item in infiniteList"> 
          <td style="width:100%"> 
           <div>{{item}}</div> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
      </div> 
      <div style='clear: both;'></div> 
      </div> 
     </div> 

जे एस:

var app = angular.module("app", ['infinite-scroll']); 

app.controller('listController', ['$scope','$http', function ($scope,$http) { 
    $scope.infiniteList = []; 
    $scope.incr = 1; 

    $scope.loadMore = function(){ 
     console.log("scroll"); 
     for(var i = 0; i< 30; i++){ 
      $scope.infiniteList.push("Item " + $scope.incr); 
      $scope.incr +=1; 
     } 
    }; 

}]); 

उत्तर

8

संपादित करें: यदि आप नवीनतम स्थिर संस्करण का उपयोग कर रहे ngInfinite एससी के

http://plnkr.co/edit/Bs9RYXhSAPhmQG5M6pyg?p=preview

पुराने:

रोल है, जो -container और -parent विधियां नहीं हैं, मैं develpoment ngInfiniteScroll.js साथ plunker अद्यतन है, अब तुम यहाँ काम कर कोड देख सकते हैं

ngInfiniteScroll, myPagingFunction() किसी भी समय तत्व के नीचे ब्राउज़र विंडो के नीचे दृष्टिकोण

तो फोन करेगा अगर आप अपने सीएसएस और remov बदल ई अधिकतम ऊंचाई, ताकि सूची पृष्ठ को कवर करे, आप देखेंगे कि infinitescroll काम कर रहा है जब उपयोगकर्ता पृष्ठ के पीछे स्क्रॉल करता है।

#list-wrapper{ 
    //max-height: 400px; 
    overflow-y: scroll; 

    margin-top: 20px; 
    border: solid 1px black; 
} 

http://plnkr.co/edit/aaUWnnKoH9kXGFx70U2J?p=preview

यह भी देखें: angularjs infinite scroll in a container

+0

मैं इस मुद्दे के साथ कुछ परेशानी थी, मैं भी संस्करण संख्या की जांच नहीं की थी , क्योंकि मुझे js फ़ाइलों को nuget से प्राप्त हुआ है, इसलिए मुझे लगता है कि वे नवीनतम संस्करण थे, लेकिन वे 2013 से थे। नवीनतम सामग्री के साथ फ़ाइल सामग्री को बदलना, और आपके उदाहरण के रूप में बदलना समस्या – bokkie

3

आपका मुख्य HTML या शरीर टैग की जाँच करें। उनमें कुछ ओवरफ्लो सीएसएस हो सकता है। तो पृष्ठ स्क्रॉल उस मामले में रैपर होना चाहिए।

body { 
height: 100%; 
overflow-y: auto; 
overflow-x: hidden; 
} 

और

<div infinite-scroll='getMoreListingData()' infinite-scroll-disabled='isbusy' 
    infinite-scroll-distance='0' 
    infinite-scroll-container="'body'"> 

यह मेरा दिन बचा लिया।

1

आप 1.3.0 संस्करण को चेकआउट कर सकते हैं, जो "अनंत-स्क्रॉल-पैरेंट" के लिए चेक करता है।

आप बोवर उपयोग कर रहे हैं: बोवर --save ngInfiniteScroll # स्थापित 1.3.0

<div class="scroll-container"> <!-- Fixed height is OK --> 
    <div infinite-scroll="vm.notifications.loadMore()" infinite-scroll-distance='1' infinite-scroll-immediate-check='true' infinite-scroll-parent="true"> 

+0

आपने अपना दिन बचाया! – walox

संबंधित मुद्दे