Как работает этот образец AngularJS Infinite Scroll

Question

Я нашел этот образец скрипта AngularJS, когда я искал его, но тогда я не могу разобраться в угловом модуле и директивной части кода. Хотя мне удалось отредактировать функцию loadMore(), чтобы получить json-ресурс из моего API ReSTful, и он отлично работает с бесконечным прокруткой, может кто-то, пожалуйста, дать объяснение, как это работает, я бы очень признателен. Я едва начал читать и пытаться AngularJS на прошлой неделе во время моего свободного времени ...

Оригинал от скрипки (A BIG Спасибо оригинального Автор): 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); 
      } 
     }); 
    }; 
}); 

Modified мной:

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

Я буду идти на это:

Эта директива возвращает функцию связи, который будет вызываться для каждого экземпляра директивы. Таким образом, он будет выполняться при загрузке и прикрепляет обработчик события прокрутки к каждому элементу списка. Если вычисление высоты истинно, оно добавит атрибут «whenScrolled», который является директивой текущего li и заставит Angular перекомпилировать DOM, который обработает новую директиву, и эта директива вызовет loadMore(), добавив больше пунктов к списку.

Применяется, потому что Angular не обработает вновь добавленную директиву в элементе списка, и наш обработчик прокрутки не будет добавлен.