このサンプルAngularJS無限スクロールのサンプル

Question

私はこのサンプルAngularJSスクリプトをいくつか探していましたが、角度モジュールとコードの指示部分に頭を下げることはできません。 ReSTful APIからjsonリソースを取得するloadMore（）関数を編集することはできましたが、無限のスクロールでうまく動作します。誰かがこの動作の仕組みを教えてください。本当に感謝します。 http://jsfiddle.net/vojtajina/U7Bz9/私が変更された

function Main($scope) { 
    $scope.items = []; 

    var counter = 0; 
    $scope.loadMore = function() { 
     for (var i = 0; i < 5; i++) { 
      $scope.items.push({id: counter}); 
      counter += 10; 
     } 
    }; 

    $scope.loadMore(); 
} 

angular.module('scroll', []).directive('whenScrolled', function() { 
    return function(scope, elm, attr) { 
     var raw = elm[0]; 

     elm.bind('scroll', function() { 
      if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) { 
       scope.$apply(attr.whenScrolled); 
      } 
     }); 
    }; 
}); 

：私はちょうどやっと...暇な時間の間、過去1週間のAngularJSを読み、しようとフィドルから

オリジナル（BIGは、元の作者にありがとうございました）を開始しました：

function Main($scope, $http) { 

    $scope.phones = []; 

    $scope.loadMore = function() { 
     $http.get('http://www.somewhere.com/api/phones').success(function(data) { 
      if($scope.phones.length > 0) { 
       $scope.phones = $scope.phones.concat(data); 
      } 
      else { 
       $scope.phones = data; 
      } 
     }); 
    }; 

    $scope.loadMore(); 
} 

Answer 1

私はこれで行く必要があります：

このディレクティブは、ディレクティブのインスタンスごとに呼び出されるリンク機能を、返します。したがって、ロード時に実行され、on scrollイベントハンドラを各リスト項目にアタッチします。高さの計算が真であれば、現在のliへの指令である属性 "whenScrolled"を添付し、DOMを再コンパイルして新しい指令を処理します。この指令はloadMore（）を呼び出して、項目をリストに追加します。

Angularは新しく追加されたディレクティブをリストアイテムで処理しないため、スクロールハンドラーは追加されないため、適用が必要です。