Question

141

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

rated 0 times [ 147] [ 6] / answers: 1 / hits: 35226 / 11 Years ago, tue, july 30, 2013, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

bryantc

Add To Favorites

Follow

Total Points: 455

Total Questions: 96

Total Answers: 110

Location: San Marino

Member since Thu, Jun 30, 2022

2 Years ago

bryantc questions

1 How to fix TypeError: Cannot read properties of undefined (reading 'useSystemColorMode')

Tue, Dec 7, 21, 00:00, 3 Years ago

1 NextJS / vercel - 504 Error 'FUNCTION_INVOCATION_TIMEOUT'

Fri, Aug 13, 21, 00:00, 3 Years ago

1 using react router with next.js

Tue, Mar 30, 21, 00:00, 3 Years ago

1 Notification system using socket.io

Fri, Jun 5, 20, 00:00, 4 Years ago

1 prisma2: how to fetch nested fields?

Wed, May 27, 20, 00:00, 4 Years ago

View All

answered 11 Years ago destanyb · Accepted Answer

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.