angular实现懒加载

Question

如何实现angular的懒加载，每次加载10条数据，滑到底部再次加载10条数据

Answer 1

写个directive，然后在里面监听滚动，滚动结束后判断是不是到了底部，如果到了底部再回调。

随手写了一截代码，未测试，尽管使用，错了再改。

app.directive('scrollOnBottom', [function() {
  return {
    restrict: 'AE',
    scope: {
      scrollOnBottom: '&',
      selfEle: '='
    },
    link: link
  };

  function link(scope, ele, attr) {
    document.addEventListener('scrool', scorllHandle);

    function scorllHandle() {
      var target = document.body;
      if (scope.selfEle) target = ele;
      if (getRect(target).isBottom) scope.scrollOnBottom();
    }

    scope.$on('$destroy', function() {
      document.removeEventListener('scrool', scorllHandle);
    });
  }

  function getRect(ele) {
    var inHeight = window.innerHeight;
    var rect = ele.getBoundingClientRect();
    // rect.isVisible = rect.top - inHeight < 0; // 是否在可视区域
    rect.isBottom = rect.bottom - inHeight <= 0;
    return rect;
  }
}]);