Onsenui infinit scroll + AngularJS ngShow

我试图显示一个加载块，当无限滚动加载更多的列表项，并且它第一次可以，但下面的工作并不奏效。当“$ scope.isLoading = true;”该块不可见。Onsenui infinit scroll + AngularJS ngShow

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回答这个问题的解决，是$超时和我想要的行为是这样的：

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

但我忘了提及的是，真正的问题的WebSQL API发生具有与原生setTimeout相同问题的回调。

来源

2014-09-21 HaSuKrOnOs

看起来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会产生错误。

来源

2014-09-22 01:35:11 Rohan

这是确定和工作，但我忘了提，真正的问题发生与API的WebSQL回调和我这样做了的setTimeout试图模仿相同的行为。不知道我说得好不好。 – HaSuKrOnOs 2014-09-22 12:47:28

Onsenui infinit scroll + AngularJS ngShow

回答

相关问题