Call AngularJS function on document ready

Question

Is there a way to call an Angular function from a JavaScript function?

function AngularCtrl($scope) {
  $scope.setUserName = function(student){  
    $scope.user_name = 'John';
  }
}

I need the following functionality in my HTML:

jQuery(document).ready(function(){
  AngularCtrl.setUserName();
}

The problem here is my HTML code is present when page is loaded and hence the ng directives in the html are not compiled. So I would like to $compile(jQuery("PopupID")); when the DOM is loaded.

Is there a way to call a Angular function on document ready?

I don't understand your setUserName function -- it takes a student argument, but hardcodes 'John'? Can you just do what you need inside a controller, not in a method? E.g., function MyCtrl($scope) { $scope.user_name = 'John'; ... }. Or is that too late? Maybe $viewContentLoaded will help if you are using ng-view: stackoverflow.com/questions/11454383/… — Mark Rajcok
– Mark Rajcok, Commented Dec 12, 2012 at 18:14

asgoth · Accepted Answer · 2012-12-20 09:13:33Z

45

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.

answered Dec 20, 2012 at 9:13

asgoth

35.8k12 gold badges91 silver badges98 bronze badges

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

1 Comment

Yahya KACEM Over a year ago

you could just use the $document instead of angular.element(document). Check the docs. note you need to inject it first.

Void · Accepted Answer · 2016-11-08 13:44:42Z

The answer above although correct, is an anti-pattern. In most cases when you want to modify the DOM or wait for the DOM to load and then do stuff (document ready) you don't do it in the controller but in he link function.

angular.module('myModule').directive('someDirective', function() {
  return {
    restrict: 'E',
    scope: {
      something: '='
    },
    templateUrl: 'stuff.html',
    controller:  function($scope, MyService, OtherStuff) {
        // stuff to be done before the DOM loads as in data computation, model initialisation...
    },
    link: function (scope, element, attributes) 
        // stuff that needs to be done when the DOM loads
        // the parameter element of the link function is the directive's jqlite wraped element
        // you can do stuff like element.addClass('myClass');
        // WARNING: link function arguments are not dependency injections, they are just arguments and thus need to be given in a specific order: first scope, then element etc.
    }
  };
});

In all honesty, valid use of $document or angular.element is extremely rare (unable to use a directive instead of just a controller) and in most cases you're better of reviewing your design.

PS: I know this question is old but still had to point out some best practices. :)

Collectives™ on Stack Overflow

Call AngularJS function on document ready

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related