angularjs無限滾動不起作用

Question

我正在嘗試在angularjs中進行無限滾動而沒有運氣。 以下是我的html代碼：

   <div ng-app='herbivore' ng-controller='Scroller'>
                      <div id="fixed" when-scrolled="loadMore()">
                        <div ng-repeat='item in items'>
                          <tr><td style="text-align:center">{{item.id}}</td>

               </div>                   
              </div>
            </div>

以下是我的angularjs代碼：

     function Scroller($scope, $http) {
$scope.items = [];

var url = "/admin/getusers?type=" + "today";

 $scope.loadMore = function() {

    $http({
        'url': url,
        'method': 'GET'
    })
        .success(function (data) {

  var items = data.response;     
  for (var i = 0; i < items.length; i++) {
      if(i < 5)
          alert("item=" + items[i].id);    
    $scope.items.push({id: i});
  }

});
};
   $scope.loadMore();

}

angular.module('scroll', []).directive('whenScrolled', function() {
return function(scope, elm, attr) {
    var raw = elm[0];

    elm.bind('scroll', function() {
        if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
            scope.$apply(attr.whenScrolled);
        }
    });
};

}）;

我從一個示例復制了大部分代碼，但看不到為什么它不起作用。 我通過提醒響應來確保數據從我的http獲取回來。 因此，數據返回了，但是網頁上沒有任何顯示。 任何幫助表示贊賞。

我再次顯示我的代碼，看來我的程序邏輯永無止境。

  function Scroller($scope, $http, $q, $timeout) {

  $scope.items = [];

 $scope.loadMore = function() {      

    var url = "/admin/getusers?type=" + "today";
    var d = $q.defer();
  $http({
        'url': url,
        'method': 'GET'
    })
        .success(function (data) {

  var items = data.response;      
  for (var i = 0; i < items.length; i++) {     
    $scope.items.push({username: items[i].username});
  }
  d.resolve($scope.items);     
  alert("end loop");

}
 );
  alert("d.promise");
return d.promise;       
 };
  alert("end of loadMore");

  $scope.loadMore();
 }

首先顯示“ d.promise”的警報。 然后，將顯示“結束循環”警報。 永遠不會顯示“ loadMore結束”的警報。 有人可以顯示我缺少的代碼使此數據顯示在我的網頁上嗎？ 我正在獲取數據。

Answer 1

答案在Promise API上

創建延遲實例時會創建一個新的Promise實例，可以通過調用deferred.promise來檢索它。

許諾對象的目的是允許感興趣的各方在完成延遲任務后獲得對延遲任務結果的訪問。

方法

then（successCallback，errorCallback，notifyCallback）–無論何時或將要解決或拒絕承諾，然后在結果可用時立即異步調用成功或錯誤回調之一。 使用單個參數調用回調：結果或拒絕原因。 另外，在解決或拒絕承諾之前，通知回調可能被調用零次或多次以提供進度指示。

此方法返回一個新的Promise，可通過successCallback的返回值errorCallback進行解析或拒絕。 它還通過notifyCallback方法的返回值進行通知。 無法通過notifyCallback方法解決或拒絕諾言。

catch（errorCallback）– Promise.then的簡寫（null，errorCallback）

最終（回調）–允許您觀察承諾的履行或拒絕，但無需修改最終值。 這對於釋放資源或進行一些清理工作很有用，無論承諾是被拒絕還是被解決。 有關更多信息，請參見完整規范。

因為最后是JavaScript中的保留字，並且ES3不支持將保留字作為屬性名稱，所以您需要調用諸如promise'finally'之類的方法，以使您的代碼與IE8兼容。

Answer 2

是否由於id="fixed"的父div上沒有固定高度而導致此問題？ 我觀察到您的代碼僅在id="fixed" div具有固定高度時才有效。