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?
- 1Not 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– Roy Truelove2012-10-25 01:25:24 +00:00Commented Oct 25, 2012 at 1:25
- 1We 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– Ben Lesh2012-10-25 01:30:02 +00:00Commented Oct 25, 2012 at 1: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– Curt2012-10-28 21:59:04 +00:00Commented Oct 28, 2012 at 21:59
Add a comment |
4 Answers
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>
2 Comments
Rahul Sagore
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.
Petr Peller
You are not supposed to use
ng-init for such things: docs.angularjs.org/api/ng/directive/ngInitI 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?
Comments
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....
3 Comments
Curt
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.
Heinrich
you might want to check out this: stackoverflow.com/questions/12922532/…
Pak
ng-init should not be used like that according to the relevant angularJS documentation.
Try
angular.element($window).bind('load', function() { }); 
3 Comments
iamdash
This could also be angular.element($window).
ryaz
$window is not defined
Dominik Ehrenberg
Did you include it in your dependencies? A controller, for instance, would have to look like this:
function($scope, $window) { ... }