How to use window.onload in angular js controller?

Question

How to use window.onload function inside a controller.

 window.onload= function() { 
    console.log("Hi Page loaded")
   };

The controller is not applicable for the full page. I want to execute a function after my controller loads at-least.

A controller is a function. Put code directly in that function, and it will be executed when the controller function is called by angular. — JB Nizet
– JB Nizet, Commented Dec 2, 2016 at 14:41
Angular functions will execute asynchronously. I want to run a particular function after all the other functions completes execution. — Santosh Hegde
– Santosh Hegde, Commented Dec 2, 2016 at 15:53
You really, really need to clarify your question. First you talk about window.onload. Then you say "after my controller loads". Then you say "after all the other functions completes execution", bu wothout saying what those other functions are. What are you trying to achieve, at a higher level? What would you like your controller to do? — JB Nizet
– JB Nizet, Commented Dec 2, 2016 at 16:01
window.onload will execute after page loads completely. So i wanted to use window.onload in my code. But my application is loading within another page. So the controller which i wrote is not for the full page. Thats why window.onload is not working. So alternate option i have is execute a function after all other function completes execution. — Santosh Hegde
– Santosh Hegde, Commented Dec 2, 2016 at 16:18

Sajeetharan · Accepted Answer · 2016-12-02 14:54:52Z

6

You can use ng-init and invoke your necessary function using the same directive

var app = angular.module('DemoApp', [])
app.controller('akuaController', function($scope) {
  $scope.load = function() {
    alert("Window is loaded");
  }
});

<!DOCTYPE html>
<html>

<head>
  <script data-require="[email protected]" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="DemoApp" ng-controller="akuaController">
  <div ng-init="load()">
  </div>
</body>

</html>

edited Dec 2, 2016 at 14:54

answered Dec 2, 2016 at 14:45

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Leprosy Over a year ago

This is not waiting for the DOM being entirely loaded.

Wilmer SH · Accepted Answer · 2016-12-02 14:46:23Z

Changing the example from Angular $window

Your Controller

angular.module('windowExample', [])
    .controller('ExampleController', ['$scope', '$window', function($scope, $window) {
      $scope.greeting = 'Hello, World!';
      $scope.doGreeting = function(greeting) {

        // This would be a starting point
        $window.onload(greeting);
      };
    }]);

Your markup

<div ng-controller="ExampleController" ng-init="ExampleController.doGreeting()">
</div>

Tanner Babcock · Accepted Answer · 2018-01-01 12:06:34Z

1

//inside your controller

$scope.$on('$viewContentLoaded', function() {

    // write here

    // either methods or variables 

});

edited Jan 1, 2018 at 12:06

Tanner Babcock

3,3606 gold badges23 silver badges23 bronze badges

answered Jan 1, 2018 at 11:31

prashant gadhiya

112 bronze badges

Collectives™ on Stack Overflow

How to use window.onload in angular js controller?

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related