1

当无限滚动加载更多列表项时，我试图显示一个加载块，并且第一次可以，但以下内容不起作用。当“$scope.isLoading = true;” 该块不可见。

HTML

<ons-scroller infinit-scroll-enable="true" on-scrolled="getNextItems()" threshold="20" style="height:100%">
    <ons-list-item  ng-repeat="i in items" modifier="tappable chevron">{{i.name}}</ons-list-item>

    <ons-list-item ng-show="isLoading"> LOADING </ons-list-item>

</ons-scroller>

JAVASCRIPT

  $scope.getNextItems = function(){
    if($scope.isLoading) return;
    $scope.isLoading = true;
      setTimeout(function(){
          $scope.$apply(function(){
              addItems($scope.items);
              $scope.isLoading = false;
          });
      },3000);
  };

这是解决问题的方法。

http://jsfiddle.net/mh6roxsk/

我尝试了不同的方法来做到这一点，但总是相同的结果。

提前致谢！！

正如@rohan 回答的那样，问题通过 $timeout 得到解决，我想要的行为是这样的：

http://jsfiddle.net/hasukronos/mh6roxsk/1/

但是我忘了提到真正的问题发生在与本机 setTimeout 有相同问题的 WebSQL api 回调上。

4

1 回答 1

2

似乎 onsen-ui 库没有使用 $apply 块在滚动内部调用您提供的方法，但是在文档的初始呈现期间第一次调用它，这就是它第一次工作的原因.

所以 Angular 第一次被告知你的变量发生了变化，但在那之后就再也没有了。

$scope.getNextItems = function(){
  if($scope.isLoading) return;

   $timeout(function(){
       addItems($scope.items);
       $scope.isLoading = false;
   },3000);

   $timeout(function() {
     $scope.isLoading = true;  
   });
};

对您的代码进行了两项更改。

  1. setTimeout 已更改为 $timeout，最重要的是默认情况下 $timeout 在 $apply 块中执行您的代码。

  2. 第二个 $timeout 用于通知角度 $scope 变量正在更改，通常您不必这样做（库应该这样做）。原因是它包含在 $timeout 调用中，因为第一次手动调用 getNextItems 并且在摘要循环期间调用 $apply 会产生错误。

于 2014-09-22T01:35:11.270 回答