Javascript 如何结合离子刷新和离子无限卷轴？

到目前为止，我已经做到了这一点，它的工作非常糟糕，每次我到页面底部时，它都会重新加载并将我扔回顶部

  <ion-content>
    <ion-refresher
      on-refresh="doRefresh()">
    </ion-refresher>
    <div ng-repeat="post in posts">
      <a ng-href="#/tabs/news/{{post.site_ID}}/{{post.ID}}">
        <h2 ng-bind-html="post.title"></h2>
        <p>{{:: post.date | date}}</p>
      </a>
    </div>
    <ion-infinite-scroll
            on-infinite="loadMore()"
            distance="1%">
     </ion-infinite-scroll>
  </ion-content>

---

问题似乎在于，您正在广播

infinterScrollComplete

和

refreshComplete

，但它们尚未实际完成。这些看起来是异步请求，但您的响应就像它们是同步的一样

这就是真正发生的事情：

$scope.posts = FreshlyPress.getBlogs($scope); // call goes out
$scope.$broadcast(etc); // call is still out, this is too early

// (call comes back at a variable time, $broadcast needs to occur at that time)

要处理这个问题，您需要回调或承诺，具体取决于

getBlogs

函数的api。看起来

getBlogs

有点神奇，它要么在内部将结果添加到$scope，要么返回一个空数组/对象，然后在结果出现时填充它。不管怎样，这都违反了单一责任原则

getBlogs

应该在回调/承诺中返回数据，并让控制器决定如何处理该数据

var limit = 10; // max results
var offset = 0; // starting index
$scope.posts = []; // add results here as they come in
$scope.loadMore = function() {
  FreshlyPressed.getBlogs(limit, offset).then(function(results) {
    $scope.posts = $scope.posts.concat(results); // add results
    offset = $scope.posts.length; // adjust offset for next query
    $scope.$broadcast('scroll.infiniteScrollComplete');
  });
}; // <-- you also had a comma here

现在你可以像以前一样加载更多的帖子

var limit = 10; // max results
var offset = 0; // starting index
$scope.posts = []; // add results here as they come in
$scope.loadMore = function() {
  FreshlyPressed.getBlogs(limit, offset).then(function(results) {
    $scope.posts = $scope.posts.concat(results); // add results
    offset = $scope.posts.length; // adjust offset for next query
    $scope.$broadcast('scroll.infiniteScrollComplete');
  });
}; // <-- you also had a comma here

$scope.posts = []; // empty results
offset = 0; // start back at first post