2013-07-30 8 views
18

Mam problem z document.ready w angularJS podczas nawigacji pomiędzy kilkoma trasami w mojej aplikacji. Działa tylko wtedy, gdy używam ctrl + f5 (przeładowanie strony); wydaje się, że nawigacja między stronami nie zmienia stanu dokumentu do gotowości.AngularJS document.ready nie działa podczas używania ng-view

Controller

angular.element(document).ready(function() { 
    window.scrollTo(0,90); 
}); 

Główny plik html

<!DOCTYPE html > 
<html ng-app="myApp"> 
    <head> 
     <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
     <title></title> 
    </head> 
    <body> 
     <div class="container"> 
      <div ng-view></div> 
     </div> 
    </body> 
</html> 

app plik

var mainModule = angular.module('myApp', ['ui.bootstrap.dialog']); 
function viewServiceConfig($routeProvider) { 
$routeProvider. 
    when('/', { 
     controller: SomeController, 
     templateUrl: 'somehtml.html' 
    }). 



    when('/someroute', { 
     controller: SomeRouteController, 
     templateUrl: 'someroutehtml.html' 
    }). 


    otherwise({ 
     redirectTo: '/' 
    }); 
} 

mainModule.config(viewServiceConfig); 
+0

Czy próbowałeś metody jqLite 'native 'bind'? Podobnie jak 'kątowy.element (document) .bind (" ready ", function() {...'? – Cherniv

+0

Nie jest jasne, w jaki sposób nawigujesz pomiędzy "stronami" (czy są to 'ng-view's,' ng- uwzględniać pełne żądania dokumentów, ...?), ale ogólnie, nie musisz wiązać się z 'DOMContentLoaded' z Angular, zamiast tego tworzyć [dyrektywę] (http://docs.angularjs.org/ ,. przewodnik/dyrektywa) –

+0

tnx @ AndréDion użyć ng widok i użyć w konfiguracji modułu trasy jak to kiedy ('/' { regulatora: SomeController, templateUrl: 'somehtml.html' }). –

Odpowiedz

39

Można słuchać w kontrolerach określonych w trasach tj SomeController i SomeRouteController dla $viewContentLoaded event. $viewContentLoaded jest emitowany za każdym razem zawartość ngView załadowaniu i powinien zapewnić podobną funkcjonalność jak document.ready przy frezowaniu w angularjs:

function SomeController($scope) { 
    $scope.$on('$viewContentLoaded', function() {window.scrollTo(0,90);}); 
} 

document.ready jest również wywołany tylko raz, kiedy załadować index.html. Nie uruchamia się, gdy załadowane są częściowe szablony zdefiniowane w konfiguracji trasy.

+0

tnx. Używam twojego rozwiązania i debuguję go firebugiem, przewija stronę do tego punktu, ale po załadowaniu strony coś się resetuje przewiń do góry strony –

+0

@SoheilGh Może spróbuj zmienić słuchacza na tę 'funkcję (event) {event.pre ventDefault(); window.scrollTo (0,90);} ' – davekr

+0

tnx ty. Używam firebug, aby dowiedzieć się, po której stronie wydarzenia przewija się na górę i znajduję ją. Zmieniłem wydarzenie na $ routeChangeSuccess i nareszcie działa –

4

udało mi się zastosować zdarzenie przewijać odpowiedź Dave'a i za pomocą routeChangeSuccess

function SomeController($scope) { 
    $scope.$on('$routeChangeSuccess', function() {window.scrollTo(0,90);}); 
} 
5

Rozwijając na odpowiedź @ davekr za znalazłem muszę dodać $ timeout zapewnienia likwidacji miał kompletne i html Elementy były dostępne do zapytania:

function SomeController($scope) { 
    $scope.$on('$viewContentLoaded', function() { 
     $timeout(function(){ 
      //Do your stuff 
     }); 
    }); 
} 

Próbowałem wielu innych wydarzeń i był to jedyny sposób, który działał niezawodnie.

Powiązane problemy