nieskończone przewijanie od góry (w tył) w AngularJS

Question

Próbuję zrobić odwrócony nieskończony zwój. Mam listę komentarzy, w której otrzymuję 10 ostatnich komentarzy i chcę, aby użytkownik mógł przewinąć do, aby pobrać kolejne 10 - podobnie jak FB, gdzie pokazuje najnowsze komentarze z linkiem "pobierz wcześniej", ale za pomocą zdarzenia przewijania, a nie łącza.

Zacząłem http://jsfiddle.net/vojtajina/U7Bz9/ i próbowała zmodyfikować go do odwrotnej nieskończonego przewijania i dość szybko zakończyła się mniej więcej tak:

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

    var counter = 0; 
    $scope.loadMore = function() { 
     // simulate an ajax request 
     $timeout(function() { 
     for (var i = 0; i < 5; i++) { 
      $scope.items.unshift({id: counter}); 
      counter += 10; 
     }}, 1000); 
    }; 

    $scope.loadMore(); 
    } 

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

     $timeout(function() { 
     raw.scrollTop = raw.scrollHeight; 
     }, 1100); 

     elm.bind('scroll', function() { 
     // note: if test for < 100 get into infinite loop due to 
     // the delayed render 
     if (raw.scrollTop === 0) { 
      var sh = raw.scrollHeight 
      scope.$apply(attr.whenScrolled); 
      // the items are not loaded and rendered yet, so 
      // this math doesn't work 
      raw.scrollTop = raw.scrollHeight - sh; 
     } 
     }); 
    }; 
    }]); 
    ​ 

http://jsfiddle.net/digger69/FwWqb/2/

problem jest, że podczas następnych 10 sztuk są pobrane, są one dodawane do początku listy, a cała lista jest ponownie renderowana, a element znajdujący się na liście jest całkowicie przewinięty poza zasięgiem wzroku. W pozycji skrzypiec "40" znajduje się u góry, a kiedy przewijasz (lekko w dół), a następnie w górę, aby uruchomić przewijane, pozycja "90" jest na górze. Poszukuję dobrej strategii utrzymania "40" na górze obszaru przewijania po wyrenderowaniu.

Uwaga: W ryba udało mi się zmusić go do pracy, zapisując się górną li w przypadku przewijania i nazywając scrollIntoView() aż dodałem timeout do symulacji wywołania AJAX. Z timeout top li jest przewijane do widoku przed wniosek wrócił i nowe elementy są renderowane:/

var top = elm.find("li")[0]; 
scope.$apply(attr.whenScrolled); 
top.scrollIntoView(); 

Answer 1

Można spróbować czegoś takiego: http://jsfiddle.net/mNFmf/4/

To będzie przewijać do dołu div:

$timeout(function() { 
    raw.scrollTop = raw.scrollHeight;   
});  

I to zachowa div z przewijania aż do pierwszej pozycji na liście:

var sh = raw.scrollHeight 
scope.$apply(attr.whenScrolled); 
raw.scrollTop = raw.scrollHeight - sh; 

---

Aktualizacja

Aby przezwyciężyć ten problem, ajax żądania, spróbuj użyć promises.

http://jsfiddle.net/mNFmf/8/

Ładowarka będzie wyglądać mniej więcej tak:

$scope.loadMore = function() { 
    var deferred = $q.defer(); 

    // do ajax request here and after getting the result call: 
    deferred.resolve(); 

    return deferred.promise; 
}; 

az drugiej strony:

loadMore.then(function() { 
    /* do whatever you want after the ajax request has been fulfilled */ 
}); 

Answer 2

Czy kiedykolwiek rozwiązać ten problem? Robimy trochę magii z odczytywaniem i ustawianiem scrollTop, ale odkryliśmy, że Safari ma pewne dziwne problemy z synchronizacją, jeśli chodzi o ustawianie i odczytywanie scrollTop w tym, że przewijamy do pozycji, a następnie szukamy nowej pozycji, a Safari nadal ma starą pozycję.