无限滚动问题答案

【问题标题】：Infinite scrolling issue无限滚动问题
【发布时间】：2015-08-28 10:12:06
【问题描述】：

我发现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>

【问题讨论】：

标签： angularjs scroll angularjs-directive angularjs-scope browserify

【解决方案1】：

实际上它变得非常简单。在指令而不是 elm 中，我使用了 $document 并将参数 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); 
                }
            });
        }
    };
};

【讨论】：