Question

我通过无限滚动调用更多项目，但如果最初加载的项目没有填满屏幕则会失败，我的意思是在这种情况下：

document.body.scrollHeight == document.body.clientHeight

如果页面有滚动条，该指令可以正常工作：

app.directive('infinitescroll', function ($rootScope, $http, $window) {
  return function ($scope, $element) {

    angular.element($window).bind('scroll', function() {
      // 100 pixels gap at the bottom of page for triggering the fetcher 
      clientHeight = html.scrollHeight - 100; 
      scrollHeight = html.scrollTop + document.querySelector('body').clientHeight;
      if (clientHeight <= scrollHeight) {
        fetcher ();
      }
    }); 

    function fetcher () {
      //get the Id of last item >> lastId
      $http.get(app.apiBaseUrl + '/items/' + lastId).then(function (response) {
         // now pushing new items to $scope
      });
    }
  }
});

我可以检查控制器是否

document.body.scrollHeight >= document.body.clientHeight

否则要求更多项目，但检查控制器中的滚动高度是不好的做法，请告诉我如何在上述指令中检查它。

Answer 1

我想建议为fetcher创建服务，并将其注入指令中。你的fetcher可以有一个函数，你可以传递id，它会请求后端并返回响应，然后你可以将它注入你的指令，关于指令：您可以使用限制A创建指令并将其设置为body属性，如下所示：

<body infinitescroll>

通过这种方式，你将拥有已经包装在jQuery中的指令element，你不需要document.querySelector('body') 因此，在计算之后，您可以从服务器获取数据并通过$emit或$boradcast

将其发送到您需要的控制器

如果页面没有滚动，如何获得更多项目

1 个答案: