無限滾動的角度指令

我編碼了無限滾動下面的指令，我無法弄清楚爲什麼它只是在指令加載時觸發的問題，我需要你的建議如何使我的列表無限滾動。無限滾動的角度指令

我使用它來遠程獲取數據，每次我打電話給它時，我都將其添加到計數器25中，所以每次都會返回更多數據。

感謝名單，

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>

來源

2015-04-20 Ya Basha

我做了一些改變，更重要的是採用NG-transclude的並指令新的作用域的創建傳遞方法和參數。你可以看看jsbind。當然數據是硬編碼的，所以我可以僞造行爲。

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

來源

2015-04-20 10:45:46 Raulucco

它不工作我的朋友 –

我改變Array.concat（$ scope.events，結果）;到[] .concat（$ scope.events，result）;.它正在使用Firefox和Chrome。之前只是在Firefox中工作 – Raulucco

無限滾動的角度指令

回答

相關問題