How to Run Function in Angularjs Controller on Document Ready

How to run function in AngularJS controller on document ready?

We can use the angular.element(document).ready() method to attach callbacks for when the document is ready. We can simply attach the callback in the controller like so:

angular.module('MyApp', [])

.controller('MyCtrl', [function() {
    angular.element(document).ready(function () {
        document.getElementById('msg').innerHTML = 'Hello';
    });
}]);

http://jsfiddle.net/jgentes/stwyvq38/1/

Call AngularJS function on document ready

Angular has its own function to test on document ready. You could do a manual bootstrap and then set the username:

angular.element(document).ready(function () {
    var $injector = angular.bootstrap(document, ['myApp']);
    var $controller = $injector.get('$controller');
    var AngularCtrl = $controller('AngularCtrl');
    AngularCtrl.setUserName();
});

For this to work you need to remove the ng-app directive from the html.

$(document).ready alternative for AngularJS

Many jQuery plugins depend on a workflow of 1. draw the DOM. 2. run an init() function to set up code against those DOM elements.

That workflow fares poorly in Angular, because the DOM isn't static: Angular sets up and destroys DOM nodes on its own lifecycle, which can overwrite event bindings or DOM changes made outside Angular. Document ready isn't particularly useful when you're using Angular, because all it indicates is that Angular itself is ready to start running.

To use Angular effectively, you have to get into the habit of initing code only when it's actually needed. So instead of a big bucket of init_foo(); init_bar(); on document.ready, you should have a Foo directive with its own init code, and a Bar directive with its own specific init code, and so on. Each of those directives should only modify the DOM created by that specific directive. This is the only safe way to ensure that the DOM elements you need to modify actually exist, and that you're not creating conflicts or unexpected interdependencies between directives.

To take one example: I'm guessing your init_flot_chart() crawls down through the DOM looking for a particular element inside of which it'll draw a flot chart. Instead of that top-down approach, create a directive:

angular.module('yourApp')
  .directive('flotWrapper', function () {
    return {
      template: "<div></div>",
      scope: {
        data: '@'
      },
      link: function(scope, elem, attrs) {
        var options = {}; // or could pass this in as an attribute if desired
        $.plot(elem, scope.data, options); // <-- this calls flot on the directive's element; no DOM crawling necessary
      }
    };
});

which you use like this:

<flot-wrapper data="{{theChartData}}"></flot-wrapper>

...where theChartData is an object containing whatever data is to be drawn in the chart. (You can add other attributes to pass in whatever other parameters you like, such as the flot options, a title, etc.)

When Angular draws that flotWrapper directive, it first creates the DOM element(s) in the directive template, and then runs whatever is in its link function against the template's root element. (The flot library itself can be included via a plain old <script> tag so its plot function is available when the directive needs it.)

(Note that this wouldn't update automatically if the contents of theChartData change; a more elaborate example which also watches for changes and responds appropriately can be seen here.)

How to execute AngularJS controller function on page load?

On the one hand as @Mark-Rajcok said you can just get away with private inner function:

// at the bottom of your controller
var init = function () {
   // check if there is query in url
   // and fire search in case its value is not empty
};
// and fire it after definition
init();

Also you can take a look at ng-init directive. Implementation will be much like:

// register controller in html
<div data-ng-controller="myCtrl" data-ng-init="init()"></div>

// in controller
$scope.init = function () {
    // check if there is query in url
    // and fire search in case its value is not empty
};

But take care about it as angular documentation implies (since v1.2) to NOT use ng-init for that. However imo it depends on architecture of your app.

I used ng-init when I wanted to pass a value from back-end into angular app:

<div data-ng-controller="myCtrl" data-ng-init="init('%some_backend_value%')"></div>

AngularJS controller called before jquery document ready callback

From the docs:

AngularJS initializes automatically upon DOMContentLoaded event or
when the angular.js script is evaluated if at that time
document.readyState is set to complete.

So:

1) I think that's because the angular.js script goes earlier of any $(document).ready(function(){}); handlers and angularjs starts bootstrapping before this handlers are fired;

2) Yes. Take a look at this two examples (the difference is only in the angular.js script placement):

angular.module('myApp', []).controller('MyCtrl', ['$scope', '$timeout', function MyCtrl($scope, $timeout) {    var ctrl = this;    console.log('ctrl');      return ctrl;}]);

<div ng-app="myApp">  <div ng-controller="MyCtrl as $ctrl">    </div></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script>$(document).ready(function(){    console.log('doc');});</script><script src="//code.angularjs.org/1.6.2/angular.js"></script>

Run document.ready with angularjs routes

Obviously the code in controller will not work as this is a single page application and by the time the controller is loaded the document is already loaded and the call back in the script tag is called. I think you can create a directive like

App.directive('testJquery', function() {
return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      $(element).parallex();
    }
  };
});

and the html be like, assuming your parallex class elements are present in each view of the routes

<div class="parallex" test-plugin><div>

If there is one div which is outside the ng-view and you want to call the parallex or any testFuntion on the element every time you change route then what you can do in your main controller(under which this element is there)

Change the directive to

App.directive('testJquery', function() {
return {
    restrict: 'A',
    scope:{
       runFunctionAgain:'='
    },
    link: function(scope, element, attrs) {
      $(element).parallex();
      scope.$watch('runFunctionAgain', function(){
           if(scope.runFunctionAgain){
               $(element).parallex();
               scope.runFunctionAgain = false;
           }
       })
    }
  };
});

And take the parameter from the controller in the directive

<div class="parallex" run-function-again="runFunctionAgain" test-plugin><div>

In the controller

   scope.runFunctionAgain = true;
 $scope.$on('$routeChangeStart', function (event, next, current) {
    scope.runFunctionAgain = true;
 });

AngularJS and JQuery -- Combining $(document).ready(function()) with Angular Controller

First, you don't need $(document).ready(). In fact, I would get rid of jQuery since both jQuery and Angular are DOM manipulation frameworks and will end up causing issues that are difficult to debug.

As for assigning the class based on value, you could use ng-repeat and a monster ng-class to apply the appropriate class based on the value. Here's a working example sans your web service call.

angular.module('app', [])  .controller('ctrl', function($scope) {    $scope.healthInfo = [{        value: 23      },      {        value: 10      },      {        value: 39      },      {        value: 88      },      {        value: 57      },      {        value: 94      },      {        value: 69      }    ];  });

.list-item {  flex-grow: 1;  width: 300px;  padding: 20px;  border: 1px solid white;}
.value-range-0-10 {  background-color: rgba(255, 0, 0, 0.5)}
.value-range-11-20 {  background-color: rgba(255, 77, 0, 0.5)}
.value-range-21-30 {  background-color: rgba(255, 128, 0, 0.5)}
.value-range-31-40 {  background-color: rgba(255, 179, 0, 0.5)}
.value-range-41-50 {  background-color: rgba(255, 230, 0, 0.5)}
.value-range-51-60 {  background-color: rgba(229, 255, 0, 0.5)}
.value-range-61-70 {  background-color: rgba(179, 255, 0, 0.5)}
.value-range-71-80 {  background-color: rgba(128, 255, 0, 0.5)}
.value-range-81-90 {  background-color: rgba(77, 255, 0, 0.5)}
.value-range-91-100 {  background-color: rgba(0, 255, 0, 0.5)}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script><div ng-app="app" ng-controller="ctrl">  <div class="list-view" style="display:flex; flex-wrap:wrap">    <div class="list-item" ng-repeat="item in healthInfo" ng-class="{'value-range-0-10':item.value <= 10, 'value-range-11-20':item.value > 10 && item.value <= 20, 'value-range-21-30':item.value > 20 && item.value <= 30, 'value-range-31-40':item.value > 30 && item.value <= 40, 'value-range-41-50':item.value > 40 && item.value <= 50, 'value-range-51-60':item.value > 50 && item.value <= 60, 'value-range-61-70':item.value > 60 && item.value <= 70, 'value-range-71-80':item.value > 70 && item.value <= 80, 'value-range-81-90':item.value > 80 && item.value <= 90, 'value-range-91-100':item.value > 90}">{{item.value}}</div>  </div></div>

Executing a function once the page is fully loaded in AngularJS

You may want to use the ng-init directive:

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

Define this function is your controller:

$scope.init = function() {
    alert("Page is fully loaded!);
}

---

Anyway, you can call this function directly from your controller. It will be call once the app and the controller are loaded.

---

Related Topics