kątowe JS: wykryć, kiedy zawartość strona była w pełni renderowane i jest widoczny

Question

Moja sytuacja

Mam dużą listę osób, które mają swoje własne pic profilu i informacji. Wszystkie elementy mają pewne style/animacje CSS3.

Im przy:

<li ng-repeat="person in people"> 

Gdzie ludzie jest tablica z ponad 150 obiektów z zewnętrznego pliku JSON, że wszyscy mają być wyświetlane na tej samej stronie.

Strona ładuje/renderuje powoli, a nie z powodu funkcji $ http GET, która pobiera dane JSON z ludźmi (co zajmuje tylko około 100ms), ale renderowanie strony i pozornie renderowanie wszystkich css3 stylizacja zastosowana do każdego przedmiotu (jeśli wyłączę mój CSS, to działa znacznie szybciej).

Moim głównym problemem

mogę żyć ze stroną renderowania powoli, ale to, co naprawdę chcę to do wykrycia, gdy mój ciężki załadowaniu strony jego treści, aby uruchamiać i zatrzymywać ładowania wskaźnik. Ive próbował dyrektywy w następujący sposób:

directive("peopleList", function() { 
    return function (scope, element, attrs) { 
     scope.$watch("people", function (value) { 
      var val = value || null; 
      console.log("Loading started"); 
      if (val){ 
       console.log("Loading finished"); 
      } 
     }); 
    }; 
}); 

I umieścić tę dyrektywę na opakowaniu div, który ładuje moją listę osób. Ale ładowanie wydaje się zatrzymywać za każdym razem, gdy mój obiekt z danymi JSON został wypełniony, co zajmuje tylko około 100ms, ale rzeczywiste wizualne renderowanie strony zajmuje więcej jak 4-5 sekund.

Spróbowałem także takich rozwiązań jak http://jsfiddle.net/zdam/dBR2r/, ale otrzymałem tam ten sam wynik.

Co muszę

Kiedy poruszać moich stron (które wszystkie mają ten sam rodzaj list) muszę coś mówi mi, gdy strona ma pełni załadowany i jest widoczny dla użytkownika tak że wiem, kiedy ukryć wskaźnik ładowania.

Answer 1

spróbuj dodać tę dyrektywę - magia jest w funkcji Link:

directives 
    .directive('onFinishRender', function ($timeout) { 
    return { 
    restrict: 'A', 
    link: function (scope, element, attr) { 
     if (scope.$last === true) { 
      scope.$evalAsync(attr.onFinishRender); 
     } 
    } 
    } 
}); 

dodać loader jako pierwszy element:

<li ng-show="!isDoneLoading"> 
    <div class="loading">Loading...</div> 
</li> 

Następnie w li, dodać to:

<li ng-repeat="..." on-finish-render="isDoneLoading = true;"> ... </li>