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

回答

相關問題