бесконечный прокрутка в угловой директиве

Question

Я закодировал приведенную ниже директиву для бесконечного прокрутки, моя проблема, которую я не мог понять, почему он просто запускается один раз, когда директива загружается, мне нужен ваш совет о том, как сделать свой список бесконечным прокруткой ,

Я использую его для получения данных удаленно, и каждый раз, когда я его вызываю, я добавляю счетчик 25, поэтому каждый раз он возвращает больше данных.

Thanx,

angular.module('MyApp') 
 
    .controller('InboxCtrl', function($scope, InboxFactory) { 
 

 
    var counter = 0; 
 

 
    $scope.loadData = function() { 
 
     var promise = InboxFactory.getEvents(counter); 
 
     promise.then(function(result) { 
 
     $scope.events = result; 
 
     }); 
 
     counter += 25; 
 
    }; 
 

 
    }); 
 

 
angular.module('MyApp') 
 
    .factory('InboxFactory', function($http, $q) { 
 
    // Service logic 
 

 
    var defered = $q.defer(); 
 

 
    function getUrl(count) { 
 
     return "api/inbox/get?request={'what':'Search','criteria':'inbox','criteriaId':null,'startTime':null,'endTime':null,'offset':" + count + ",'limit':25,'order':'event_time','direction':'DESC','source':''}"; 
 
    } 
 

 
    function extract(result) { 
 
     return result.data.data; 
 
    } 
 

 
    // Public API here 
 
    return { 
 
     getEvents: function(count) { 
 
     $http.get(getUrl(count)).then(
 
      function(result) { 
 
      defered.resolve(extract(result)) 
 
      }, function(err) { 
 
      defered.reject(err); 
 
      } 
 
     ); 
 

 
     return defered.promise; 
 
     } 
 
    }; 
 
    }); 
 

 
angular.module('MyApp') 
 
    .directive('infiniteScroll', ['$timeout', 
 
    function(timeout) { 
 
     return { 
 
     link: function(scope, element, attr) { 
 
      var 
 
      lengthThreshold = attr.scrollThreshold || 50, 
 
      timeThreshold = attr.timeThreshold || 400, 
 
      handler = scope.$eval(attr.infiniteScroll), 
 
      promise = null, 
 
      lastRemaining = 9999; 
 

 
      lengthThreshold = parseInt(lengthThreshold, 10); 
 
      timeThreshold = parseInt(timeThreshold, 10); 
 

 
      if (!handler || !components.isFunction(handler)) { 
 
      handler = components.noop; 
 
      } 
 

 
      element.bind('scroll', function() { 
 
      var 
 
       remaining = element[0].scrollHeight - (element[0].clientHeight + element[0].scrollTop); 
 

 
      //if we have reached the threshold and we scroll down 
 
      if (remaining < lengthThreshold && (remaining - lastRemaining) < 0) { 
 

 
       //if there is already a timer running which has no expired yet we have to cancel it and restart the timer 
 
       if (promise !== null) { 
 
       timeout.cancel(promise); 
 
       } 
 
       promise = timeout(function() { 
 
       handler(); 
 
       promise = null; 
 
       }, timeThreshold); 
 
      } 
 
      lastRemaining = remaining; 
 
      }); 
 
     } 
 

 
     }; 
 
    } 
 
    ]);

<ul class="inbox-list" infinite-scroll="loadData()"> 
 
    <li class="clearfix" ng-repeat="event in events">{{event}}</li> 
 
</ul>

Answer 1

Я сделал некоторые изменения более важным является использование нг-transclude и создание новой области для директивы передать метод и параметры , Вы можете посмотреть на jsbind. Конечно, данные жестко закодированы, чтобы я мог подделывать поведение.

<ul class="inbox-list" my-infinite-scroll composite-method="loadData()">