无限滚动问题

Question

我发现example无限滚动，并试图执行相同的操作，但修复所有错误后，我发现它仍然无法正常工作。

这里的指令：

module.exports = /*@ngInject*/ 
function scrollDirective($rootScope) { 
    return { 
     link: function (scope, elm, attr) { 
      var raw = elm[0]; 

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

那么它是如何在控制器（我有诺言JSON数据）

module.exports = /*@ngInject*/ 
function cardController($scope, dataFactory) { 
    var promise = dataFactory.get(); 
    promise.then(function(data) { 
    $scope.data = data; 
    $scope.items = []; 
    //$scope.items.push($scope.data[0]); 
    var counter = 0; 

    $scope.loadMore = function() { 
     for (var i = counter; i < counter+9; i++) { 
      $scope.items.push($scope.data[i]); 
     } 
     counter += 9; 
    }; 

    $scope.loadMore(); 
    }, function(reason) { 
     console.log('Failed: ' + reason); 
    }); 
}; 

最后的html：

<div class="mdl-grid" scroll-directive="loadMore()"> 
    <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone" ng-repeat="item in items"> 
    <md-card> 
     <img ng-src="{{ item.url }}" class="md-card-image"> 
     <md-card-content> 
     <md-icon ><i class="material-icons md-36 md-album">photo_album</i></md-icon> 
     <h3 class="md-title">{{ item.title }}</h3> 
     </md-card-content> 
    </md-card> 
    </div> 
</div> 

Answer 1

其实它变得很简单。在指令中，我使用了$document而不是elm，并将参数i传递给该函数。在探索i的胆量后，我通过i.target.activeElement发现了我需要的所有参数。这里是解决方案：

function scrollDirective($rootScope,$document) { 
    return { 
     link: function (scope, elm, attr) { 
      var raw = elm[0]; 

      $document.bind('scroll', function (i) { 
       if (i.target.activeElement.scrollTop+i.target.activeElement.offsetHeight +5>= i.target.activeElement.scrollHeight){ 
        scope.$apply(attr.scrollDirective); 
       } 
      }); 
     } 
    }; 
};