Skip to main content
2 de 4
se eliminaron 13 caracteres en el cuerpo

¿Cómo implementar correctamente ngInfiniteScroll?

Este es mi código, todo funciona correctamente pero tengo 2 errores, por favor espero que puedan ayudarme.

1-Al realizar una búsqueda en el input los artículos se filtran correctamente y al hacer scroll y llegar al bottom se ejecuta la función de ngInfiniteScroll y van apareciendo los artículos anteriores pero al realizar otra búsqueda luego de aver realizado el scroll y se haya ejecutado la función del ngInfiniteScroll al llegar al bottom, aparecen todos los artículos al mismo tiempo de golpe, es cómo si el ngInfiniteScroll dejara de funcionar.

2-en el infinite-scroll-distance='0' tengo que colocar 0 obligatoriamente por qué si pongo 1, 2 o 3 por ejemplo la función se activa al hacer scroll instantáneamente y no al llegar al bottom.

.controller('newsCtrl', ['$scope','$rootScope','DataSource', function($scope,$rootScope,DataSource){
    DataSource.get('/json/news.json', function(data){
      $scope.itemData = data.slice(0,18);
      $scope.itemsData = data;
      $scope.selected = data[0];
    });
    $scope.loadMore = function(){
      if($scope.itemData === undefined || $scope.itemsData === undefined){
        return;
      }
      var last = $scope.itemData.length-1;
      for(var i=1; i<=18; i++){
        if($scope.itemData.length >= $scope.itemsData.length){
          break;
        }
        $scope.itemData.push($scope.itemsData[last+i]);
      }
    };
  }]).factory('DataSource', ['$http', function($http){
    return{
      get: function(fileName,callback){
        $http.get(fileName).then(function(response){
          callback(response.data);
        },function(){
          console.log('error');
        });
      }
    };
  }]);
<section id="cd-team" class="cd-section"
  infinite-scroll='loadMore()'
  infinite-scroll-distance='0'>

  <div class="cd-container">

    <form autocomplete="off" accept-charset="UTF-8">
      <input type="search" id="search" maxlength=26 placeholder="Buscar noticias..."
      ng-model="search.title" ng-model-options="{updateOn : 'search'}">
    </form>

    <ul>

      <li ng-repeat="item in itemData | orderBy:'-order' | limitTo:816 | filter:search as results">
        <a ng-href="/news/{{item.id}}">
          <figure>
            <img ng-src="{{item.imageUrl}}">
            <figcaption am-time-ago="item.date | amParse:'DD/MM/YYYY h:mm:ss a'"></figcaption>
          </figure>
          <div class="cd-news-info">{{item.title}}<span>{{item.info}}</span></div>
        </a>
      </li>

      <span ng-if="results.length==0">No hay resultados...</span>

    </ul>

  </div>
</section>