Onsen Ui 无限滚动 + AngularJS ng Show

Question

我试图在无限滚动加载更多列表项时显示加载块，并且第一次可以，但以下内容不起作用。当“$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/

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

Answer 1

似乎 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 用于通知 Angular $scope 变量 正在改变，通常你不应该这样做（图书馆应该这样做）。原因是它包含在 $timeout 调用中，因为第一次手动调用 getNextItems 并且在摘要循环期间调用 $apply 会产生错误。