[removed] does not work in AngularJS

2019-01-24 02:13发布

问题:

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?

回答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>



回答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?



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



回答4:

Try

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