Menu
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); 
524
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.
66
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.
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
