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>

ジャバスクリプト

  $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 ブロックを使用して on-scrolled 内部で提供されたメソッドを呼び出さないようですが、ドキュメントの最初のレンダリング中に初めて呼び出されるため、初めて機能します.

そのため、angular は変数の変更について初めて通知されますが、その後は通知されません。

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

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

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

コードに 2 つの変更が加えられました。

  1. setTimeout は $timeout に変更されました。最も重要なことは、デフォルトで $timeout が $apply ブロックでコードを実行することです。

  2. 2 番目の $timeout は、$scope 変数が変更されていることを angular に通知するためのものです。通常、これを行う必要はありません (ライブラリがこれを行う必要があります)。$timeout 呼び出しでラップされている理由は、最初に getNextItems が手動で呼び出され、ダイジェスト サイクル中に $apply を呼び出すとエラーが発生するためです。

于 2014-09-22T01:35:11.270 に答える