Question

我试图在无限滚动加载更多列表项时显示加载块，并且第一次确定它，但以下情况确实有效。当＆＃34; $ scope.isLoading = true;＆＃34;该块不可见。

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块调用你在滚动内部提供的方法，但它是在文档的初始渲染期间第一次调用，这就是它工作的原因第一次。

因此，角度第一次被告知你的变量发生了变化，但从那以后就没有了。

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

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

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

您的代码已经进行了两处更改。

setTimeout已更改为$ timeout，最重要的是默认情况下$ timeout会在$ apply块中执行您的代码。
第二个$ timeout用于通知角度$ scope变量正在改变，通常你不应该这样做（图书馆应该这样做）。原因是它包含在$ timeout调用中是因为第一次手动调用getNextItems并在摘要周期中调用$ apply会产生错误。

Onsen Ui无限滚动+ AngularJS ng Show

1 个答案: