window.onload does not work in AngularJS

Question

This code in a simple HTML file works:

<script>
  function load() {
    alert("load event detected!");
  }
  window.onload = load;
</script>

However, if I put it into the index.html file of an AngularJS web app, it does not. Does anybody know why not?

Answer 1

Call your function with ng-init

var app = angular.module('app',[]);
app.controller('myController', function($scope){
    $scope.load = function () {
        alert("load event detected!");
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app'>
  <div ng-controller='myController' ng-init='load()'></div>
</div>

Answer 2

I prefer putting this kind of code in the app.run() function of angular.

e.g.

angular
.module('testApp', ['someModule'])
.constant('aConstant', 'hi')
.config(function($rootProvider) {/*some routing here*/})
.run(['$window', function($window) {
  $window.onload = function() {/*do your thing*/};
}]);

also check this nice post that depicts the order that some things happen in angular AngularJS app.run() documentation?

Answer 3

the following should work:

jQuery(function(){ /** my window onload functions **/ })

since angular uses a subset of jquery anyways you also may include the real thing.

better yet:
Instead of using this, you may consider using the angular way of initialising things:

that would be: http://docs.angularjs.org/api/ng.directive:ngInit

< any ng-init="functionInController(something)"...

to make it invisible until init: http://docs.angularjs.org/api/ng.directive:ngCloak

< any ng-cloak .....

to initialise/customize whole parts: http://docs.angularjs.org/guide/directive

< any directive-name....

Answer 4

Try

angular.element($window).bind('load', function() {
});