javascript - 如何检查屏幕高度以进行进一步的 $http 请求？

Question

假设一个函数检查屏幕高度并发出 $http.get 请求，直到它填满屏幕。

app.controller('HomeController', function ($scope, $timeout, Api) {
  function checkScreen () {
    $timeout(function() {
      //Firefox fix
      var html = document.getElementsByTagName('html')[0];
      if (html.scrollTop == 0) {
        html = html.getElementsByTagName('body')[0];
      }

      var scrollHeight = html.scrollHeight;
      var clientHeight = document.querySelector('body').clientHeight;
      var fromTime = Date.parse($scope.data[$scope.data.length - 1].value.date);
      if (clientHeight == scrollHeight) {
        $scope.fetcher(fromTime, checkScreen);
      }
    });
  }

  $scope.fetcher(0, checkScreen);
});

fetcher 使用 Api 服务来处理 $http 请求

$scope.fetcher = function (fromTime, callback) {
  Api.post.getList(fromTime).then(function (result) {
    for (var i = 0; i < result.data.length; i++) {
      $scope.data.push(result.data[i]);
    };
    callback();
  });
}

此代码有几个不良做法问题:

• 检查 Controller 中的 HTML/CSS 属性
• 需要在 Controller 中初始调用 fetcher
• 如果我需要在指令中调用 fetcher(例如无限滚动附加程序)，该指令将与 Controller 紧密耦合。

我应该如何重构它来消除这些问题？
注意: $scope.fetcher 在每个 Controller 中都不同，但无限滚动指令对于所有 Controller 来说都是通用的。

Answer 1

我认为使用 Api 服务创建一个名为 Fetcher 的更具体的服务是比在 Controller 中使用 $scope.fetcher 更好的解决方案。
这样方向就不会再与 Controller 紧密耦合。
另外，检查屏幕作为 AngularJS 一侧的独特功能，并使用它在 Controller 中返回的 bool 值来使用 Fetcher 服务进行多个操作