如何在angularjs中使用infinte滚动？_Angularjs

如何在angularjs中使用infinte滚动？

angularjs

如何在angularjs中使用infinte滚动？,angularjs,Angularjs,我有一个代码。我正在尝试应用infinte滚动，但它没有执行有人能帮我解决这个问题吗？它显示所有的数字，即使我向下滚动，它的表现也不像阴阴囊 //HTml file <style> #fixed { height: 400px; overflow: auto; } </style> <body ng-controller="controller"> <div id="fixed" in

我有一个代码。我正在尝试应用infinte滚动，但它没有执行

有人能帮我解决这个问题吗？它显示所有的数字，即使我向下滚动，它的表现也不像阴阴囊

//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();
}]);

//HTml文件
#固定的{
高度：400px；
溢出：自动；
}
{i.id}
//js文件
var-app=angular.module（“myapp”['infinite-scroll']）；
app.controller（“controller”、[“$scope”、函数（$scope）{
$scope.items=[]；
var计数器=0；
$scope.showloader=false；
$scope.scrolling=function（）{
对于（var i=0；i这就是如何将侦听器绑定到窗口的滚动事件。我在Api请求发生的位置放置了一个100像素的空间，并使用一个标志来防止多个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;
                 });

              }
            });
          }
        }
      }
    ]);

app.directive（'infiniteScroll'[
“$rootScope”、“$window”、“$http”，
函数（$rootScope、$window、$http）{
返回{
链接：函数（$scope、$element、$attrs）{
window.angular.element（$window.bind（'scroll'，function（）{
//开始提取页面底部100像素空间中的数据
clientHeight=html.scrollHeight-100；
scrollHeight=html.scrollTop+document.querySelector（'body'）.clientHeight；
//只有在页面底部没有其他请求的情况下，才请求进一步的数据
if（clientHeight//HTML代码
在此处插入标题
#固定的{
高度：400px；
溢出：自动；
}
李{
高度：120px；
边框底部：1px纯色灰色；
}

{i.id}

//Js代码
var-app=angular.module（“myapp”['infinite-scroll']）；
app.controller（“controller”、[“$scope”、函数（$scope）{
$scope.items=[]；
var计数器=0；
$scope.scrolling=function（）{
对于（var i=0；i退出：-->>是的，我已经做了相同的事情，这是在该链接中…我无法获得infinte滚动。我们不能不使用指令来完成吗？处理事件和处理元素的正确方法是使用指令。它非常容易使用，只需将无限滚动作为属性添加到文档的正文或html标记中即可如果你来自JQuery背景，我建议你阅读以下内容：另一点，当你发现你的控制器中充满了与用户交互相关的函数的逻辑或事件侦听器时，请确保你错误地绕过AngularJs到纯JAVScription。最好知道如何做而不使用指令。对。我已经完成了usiING dfirective。它起作用了。但我正在尝试不使用DirectIVE。我已经完成了该程序，但无法显示正在加载的图像
//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++;

            }

    };

}]);