AngularJS document.ready doesn't work when using ng-view

Question

I have a problem with document.ready in angularJS when navigating between several routes in my app. It only works when I use ctrl+f5 (page reload); it seems navigating between pages does not change state of the document to ready.

Controller

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

Main html file

<!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 file

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);

Did you tried jqLite' native bind method? Like angular.element(document).bind("ready" , function(){... ? — Ivan Chernykh
– Ivan Chernykh, Commented Jul 30, 2013 at 11:07
It's not clear how you're navigating between "pages" (are these ng-views, ng-includes full document requests, ...?) but generally, you don't need to bind to DOMContentLoaded with Angular. Instead, you'd create a Directive. — André Dion
– André Dion, Commented Jul 30, 2013 at 11:11
tnx @AndréDion . i use ng-view and use route in module configuration like this when('/', { controller: SomeController, templateUrl: 'somehtml.html' }). — Soheil Ghahremani
– Soheil Ghahremani, Commented Jul 30, 2013 at 11:16

Nike Sprite · Accepted Answer · 2015-08-24 08:49:14Z

40

You can listen in your controllers defined in routes i.e. SomeController and SomeRouteController for $viewContentLoaded event. $viewContentLoaded is emitted every time the ngView content is reloaded and should provide similar functionality as the document.ready when routing in angularjs:

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

The document.ready is also triggered only once when you load your index.html. It is not triggered when the partial templates defined in your route configuration are loaded.

edited Aug 24, 2015 at 8:49

Nike Sprite

4762 silver badges16 bronze badges

answered Jul 30, 2013 at 12:04

davekr

2,2761 gold badge27 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Soheil Ghahremani Over a year ago

tnx . i use your solution and debug it with firebug . it scrolls page to that point but after page loads completely something reset scroll to top of page

davekr Over a year ago

@SoheilGh Maybe try to change the listener to this function(event) {event.preventDefault(); window.scrollTo(0,90);}

Soheil Ghahremani Over a year ago

tnx you . i use firebug to find out after which event page scrolls to top and i find it . i changed the event to $routeChangeSuccess and it works finally

Daniel Flippance · Accepted Answer · 2016-03-22 09:54:37Z

5

Expanding on @davekr's answer, I found I need to add a $timeout to ensure the digest had complete and the html elements were available to query:

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

I tried many other events and this was the only way that worked reliably.

answered Mar 22, 2016 at 9:54

Daniel Flippance

7,9626 gold badges47 silver badges61 bronze badges

Comments

Soheil Ghahremani · Accepted Answer · 2014-09-13 04:46:48Z

4

I was able to apply the scroll event through Dave's answer and by using routeChangeSuccess

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

edited Sep 13, 2014 at 4:46

answered Jul 30, 2013 at 12:55

Soheil Ghahremani

1,1451 gold badge16 silver badges37 bronze badges

Collectives™ on Stack Overflow

AngularJS document.ready doesn't work when using ng-view

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related