Question

所以我试图在离子中实现无限滚动，我在noMoreItemsAvailable上有一个ng-if。我看到控制台日志，但无限滚动不会停止。我是JS / ionic的新手。

$scope.idx = 0;
$scope.noMoreItemsAvailable = true;
$scope.loadMore = function() {


  $scope.items.push($scope.items[$scope.idx++]);

  if ( $scope.items.length > 50 ) {
    console.log("Debug"+$scope.items[$scope.idx].name);
    $scope.noMoreItemsAvailable = false;
  }
  $scope.$broadcast('scroll.infiniteScrollComplete');

};

HTML：

<ion-infinite-scroll ng-if="noMoreItemsAvailable"
  on-infinite="loadMore()"
  distance="10%">
</ion-infinite-scroll>

Answer 1

首先，ngIf创建子范围：如果您使用Chrome扩展程序batarang并检查$scope.noMoreItemsAvailable === true，$scope.noMoreItemsAvailable范围内的ngIf可能是false - 这是一个常见的角度陷阱（参见canonical stack overflow answer for a thorough explanation，但简短的回答，因为Javascript的原型固有，这就是原因）。快速解决方法是在某个对象（.noMoreItemsAvailable）上设置$scope.myObj.noMoreItemsAvailable属性，这将修复您的继承问题。

另外，由于ngIf创建了子范围，<ion-infinite-scroll>可能无法获得scroll.infiniteScrollComplete事件 - 您可以改为$emit它，$broadcast它来自$scope.$parent，或$rootScope.$broadcast，但大多数人可能认为前者最简洁。我没有使用过这个指令，所以我不确定，但如果是这样的话也不会感到惊讶。

我可能在那里捏造了一些细节，但是底线：阅读有关角度'点'的问题，并且知道ngIf创建了一个儿童范围！

Answer 2

我有这个工作，但我不完全确定我是否可以解释它为什么起作用。

我观察到这条线已被执行，但是物品却未在全球范围内更新，不确定如何最好地解释它。因为在项目的函数长度内局部增加但是没有反映在我的html（ng-repeat）中。

$scope.items.push($scope.items[$scope.idx++]);

我添加了这一行

$scope.$apply();

现在，因为我将静态数组的数据反馈回来，所以它开始抛出错误，表明我不能再添加两次相同的对象。

我通过用这个

取代原来的“推”来解决这个问题

$scope.items.push(angular.copy($scope.items[$scope.idx++]));

不知道

的解释

对于继承目的没有任何其他更改，“ng-if”是工作，滚动在50个数据点后停止。
为什么项目的长度增加而没有真正向数组添加新项目。

Answer 3

$timeout(function() { 
       $timeout(function() {
               $scope.$broadcast('scroll.infiniteScrollComplete');
               // call your ng-if to set to false
       });
  });

这适用于离子的最新rc1版本。

在离子中停止无限滚动

3 个答案: