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();
  });
}

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

检查控制器中的HTML / CSS属性
需要在控制器中初始调用fetcher
如果我需要在指令中调用fetcher（比如无限滚动的appender），该指令将与控制器紧密结合。

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

Answer 1

我认为使用Api服务创建一个名为Fetcher的更具体的服务比在控制器中使用$ scope.fetcher更好。
通过这种方式，方向将不再与控制器紧耦合 另外，检查屏幕作为AngularJS侧面的一个独特功能，并使用它在控制器中返回的布尔值，使用Fetcher服务

如何检查屏幕高度以获取更多$ http请求？

1 个答案: