15

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?

Curt
  • 1,181
  • 3
  • 19
  • 29
  • 1
    Not saying the two things are incompatible, but if you're taking the time to write an angularJS app then you should probably look to find a better home for your load function. A controller attached to the top level HTML element might do it.. – Roy Truelove Oct 25 '12 at 01:25
  • 1
    We need more information... for one thing. The code you have works flawlessly for me. For another thing, what are you trying to do? Roy Truelove is absolutely right, you probably don't need to use a window.onload in an angular app. – Ben Lesh Oct 25 '12 at 01:30
  • Thanks @RoyTruelove and blesh. I just tried executing the code from within index.html and this time it works. I have no idea what has changed. You're probably right about not needing window.onload. I will try another way. – Curt Oct 28 '12 at 21:59

4 Answers4

11

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>
Mo.
  • 26,306
  • 36
  • 159
  • 225
  • 1
    I'm also having same problem, I am using $window.load to check if all the images have been loaded, init does not call on after all image load. It fires before that. – Rahul Sagore Dec 14 '15 at 12:03
  • 2
    You are not supposed to use `ng-init` for such things: https://docs.angularjs.org/api/ng/directive/ngInit – Petr Peller Feb 28 '16 at 16:56
9

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?

Community
  • 1
  • 1
agelbess
  • 4,249
  • 3
  • 20
  • 21
4

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....

Jakob Jingleheimer
  • 30,952
  • 27
  • 76
  • 126
Heinrich
  • 313
  • 2
  • 13
  • Thanks @Heinrich for your suggestion. I'm new to AngularJS so that might take me a while to figure out, but it's probably worth checking into. – Curt Oct 28 '12 at 22:06
  • you might want to check out this: http://stackoverflow.com/questions/12922532/breaking-html-into-management-templates-for-angularjs/12923289#12923289 – Heinrich Oct 28 '12 at 22:52
  • 2
    ng-init should not be used like that according to the relevant [angularJS documentation](https://docs.angularjs.org/api/ng/directive/ngInit). – Pak Apr 24 '14 at 15:05
3

Try

angular.element($window).bind('load', function() {
});
Dominik Ehrenberg
  • 1,533
  • 1
  • 15
  • 12