如何在angularjs中使用infinte scroll？

-1

我有一個代碼。我正在嘗試應用infinte滾動，但它沒有執行。如何在angularjs中使用infinte scroll？

任何人都可以幫助我解決這個問題。它顯示所有的數字，即使我向下滾動它的表現不像infine scrol。

//HTml file 
<style> 
#fixed { 
      height: 400px; 
     overflow: auto; 
     } 
</style> 
<body ng-controller="controller"> 

    <div id="fixed" infinite-scroll="scrolling()" infinite-scroll-distance='2'> 

     <li ng-repeat="i in items" >{{i.id}}</li> 

    <img src="http://jimpunk.net/Loading/wp-content/uploads/loading1.gif" ng-hide="!showLoader"/> 
    </div> 

</body> 
</html> 

//js file 

var app=angular.module("myapp",['infinite-scroll']); 
app.controller("controller",['$scope',function($scope){ 
    $scope.items=[]; 
    var counter=0; 
    $scope.showloader=false; 
    $scope.scrolling=function(){ 

     for(var i=0;i<500;i++) 
      { 

       $scope.items.push({id:counter}); 
       counter++; 
       /*console.log({{items}});*/ 
      } 
     $scope.showloader=true; 
    }; 
    $scope.scrolling(); 
}]);

來源

2015-09-14 Vindya Veer

檢查出： - >> https://github.com/sroze/ngInfiniteScroll –

是的，我做了同樣的鏈接... IAM無法獲取infinte滾動。 –

這就是你可以如何綁定偵聽器來滾動窗口的事件。我把一個100像素的空間，API請求發生，而我使用的是標誌，以防止多個API請求：

app.directive('infiniteScroll', [ 
     '$rootScope', '$window', '$http', 
     function ($rootScope, $window, $http) { 
     return { 
      link: function ($scope, $element, $attrs) { 



      window.angular.element($window).bind('scroll', function() { 




       // start fetching data in 100 pixels space in bottom of the page 
       clientHeight = html.scrollHeight - 100; 
       scrollHeight = html.scrollTop + document.querySelector('body').clientHeight; 


       // request for further data only if at the bottom of the page and no other request are in progress 
       if (clientHeight <= scrollHeight && $rootScope.makeInfiniteCall) { 

       // prevent further fetchings 
       $rootScope.makeInfiniteCall = false; 

       // Fetch you data here and push it to scope, then let further Api requests happen 
       $http.get('/path/to/Api').then(function (result) { 
        // unshift items if the sequence is important 
        for (var i = result.data.length -1; i == 0; i--){     
        $scope.data.unshift(result.data[i]); 
        } 
        // or simply concat the entire array if the sequence of items is not important 
        // $scope.data.concat(result.data); 
        $rootScope.makeInfiniteCall = false; 
       }); 

       } 
      }); 
      } 
     } 
     } 
    ]);

來源

2015-09-14 06:13:10 Reyraa

我們可以不使用指令嗎？ –

處理事件和處理元素的正確方式是Angular使用指令。它非常易於使用，只需將無限滾動作爲屬性添加到文檔的主體或html標記即可。如果你來自JQuery背景，我建議你閱讀以下內容：http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background – Reyraa

另一點，當你發現你的控制器充滿了與用戶交互相關的函數的邏輯或事件監聽器，確保你不正確地繞過AngularJs到純粹的Javscript – Reyraa

//HTML code 

<!DOCTYPE html> 
<html ng-app="myapp"> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<script src='angularfiles/angular.min.js'></script> 
<script src="Jsfiles/scroll.js"></script> 
<script src="angularfiles/ng-infinite-scroll.js"></script> 
</head> 
<style> 
#fixed { 
      height: 400px; 
     overflow: auto; 
     } 
     li { 
      height: 120px; 
      border-bottom: 1px solid gray; 
      } 

</style> 
<body ng-controller="controller"> 

    <div id="fixed"> 
    <ul infinite-scroll="scrolling()" infinite-scroll-distance='0' infinite-scroll-parent="true"> 
     <li ng-repeat="i in items" >{{i.id}}</li> 
     <img src="http://jimpunk.net/Loading/wp-content/uploads/loading1.gif"/> 
    </ul> 


    </div> 
</body> 
</html> 

//Js code 

var app=angular.module("myapp",['infinite-scroll']); 
app.controller("controller",['$scope',function($scope){ 
    $scope.items=[]; 
    var counter=0; 

    $scope.scrolling=function(){ 

     for(var i=0;i<5;i++) 
      { 

       $scope.items.push({id:counter}); 
       counter++; 

      } 

    }; 

}]);

這就是我的回答，我已經不使用directive.Hope它可能有用嘗試給他人。

來源

2015-09-14 07:36:26

如何在angularjs中使用infinte scroll？

回答

相關問題