<!DOCTYPE html>
<html ng-app="documentReady">
<head>
<meta charset="utf-8" />
<title>$document.ready vs. $viewContentLoaded</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
</head>
<body ng-controller="MainController">
<p>Hello {{name}}!</p>
<div ng-click="goToUrl('/view-content-loaded')"><a href="#/view-content-loaded" target="_self">$scope.$on('$viewContentLoaded', function() {})</a></div>
<div ng-click="goToUrl('/document-ready')"><a href="#/document-ready" target="_self">$document.ready()</a></div>
<div ng-view></div>
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.4.8/angular.min.js" data-semver="1.4.8"></script>
<script src="https://code.angularjs.org/1.4.8/angular-route.min.js"></script>
<script data-require="lodash.js@3.10.x" data-semver="3.10.0" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.min.js"></script>
<script src="app.js"></script>
</body>
</html>
angular.module('documentReady', ['ngRoute'])
.controller('MainController', function($location, $route, $scope, $timeout, $window) {
// $scope.goToUrl = function(url) {
// $location.path(url);
// // $window.location.reload();
// };
})
.controller('DocumentReadyController', function($document, $scope, $timeout) {
$scope.repeater = _.range(40);
$scope.height;
$document.ready(function () {
// $timeout(function() {
var element = document.getElementById('document-ready');
console.log('$document.ready(), height before timeout:', element.offsetHeight);
$scope.height = element.offsetHeight;
// });
$timeout(function() {
console.log('$document.ready(), height after timeout:', element.offsetHeight);
});
});
})
.controller('ViewContentLoadedController', function($scope) {
$scope.repeater = _.range(40);
$scope.height;
$scope.$on('$viewContentLoaded', function() {
var element = document.getElementById('view-content');
console.log('$scope.$on(\'viewContentLoaded\'), element height:', element.offsetHeight);
$scope.height = element.offsetHeight;
});
})
.config(function($routeProvider) {
$routeProvider
.when('/document-ready', {
templateUrl : 'document-ready.html',
controller : 'DocumentReadyController',
reload: true
})
.when('/view-content-loaded', {
templateUrl : 'view-content-loaded.html',
controller : 'ViewContentLoadedController'
});
});
/* Styles go here */
<div ng-controller="DocumentReadyController">
<p>$document.ready()</p>
<p>Height: {{height}}</p>
<div id="document-ready">
<div>before</div>
<div>before</div>
<div>before</div>
<div>before</div>
<div>before</div>
<div>before</div>
<div>before</div>
<div>before</div>
<div>before</div>
<div>before</div>
<div>before</div>
<div>before</div>
<div>before</div>
<div>before</div>
<div>before</div>
<div>before</div>
<div>before</div>
<!--<div ng-repeat="line in repeater">before</div>-->
<img src="http://thenextweb.com/wp-content/blogs.dir/1/files/2015/03/angularjs.jpeg" alt="image">
<!--<div ng-repeat="line in repeater">after</div>-->
<div>after</div>
<div>after</div>
<div>after</div>
<div>after</div>
<div>after</div>
<div>after</div>
<div>after</div>
<div>after</div>
<div>after</div>
<div>after</div>
<div>after</div>
<div>after</div>
<div>after</div>
<div>after</div>
<div>after</div>
<div>after</div>
</div>
</div>
<div ng-controller="ViewContentLoadedController">
<p>$scope.$on('$viewContentLoaded', function() {})</p>
<p>Height: {{height}}</p>
<div id="view-content">
<div>before</div>
<div>before</div>
<div>before</div>
<div>before</div>
<div>before</div>
<div>before</div>
<div>before</div>
<div>before</div>
<div>before</div>
<div>before</div>
<div>before</div>
<div>before</div>
<div>before</div>
<div>before</div>
<div>before</div>
<div>before</div>
<div>before</div>
<!-- <div ng-repeat="line in repeater">before</div> -->
<img src="http://thenextweb.com/wp-content/blogs.dir/1/files/2015/03/angularjs.jpeg" alt="image">
<!--<div ng-repeat="line in repeater">after</div>-->
<div>after</div>
<div>after</div>
<div>after</div>
<div>after</div>
<div>after</div>
<div>after</div>
<div>after</div>
<div>after</div>
<div>after</div>
<div>after</div>
<div>after</div>
<div>after</div>
<div>after</div>
<div>after</div>
<div>after</div>
<div>after</div>
</div>
</div>