How to call a javascript function after the angularjs has finished loading and page is rendered

Question

Background:

I have an angularjs application which displays a datetimepicker field.

Issue:

Once the page is loaded I want to run a javascript function to initialize the datepicker used in the page. At the moment it seems that the function call that I placed at the end of the page doesn't get picked.

Note : I use the 'bootstrap datetimepicker' from (http://eonasdan.github.io/bootstrap-datetimepicker/)

in the controller you can reinitialized but not a good practice. — Arpit Srivastava
– Arpit Srivastava, Commented Jan 19, 2015 at 4:07
use angular bootstrap as it's very easy to configure angular-ui.github.io/bootstrap/#/datepicker — Arpit Srivastava
– Arpit Srivastava, Commented Jan 19, 2015 at 6:09

Felix D. · Accepted Answer · 2015-01-19 04:46:25Z

2

Just use the $viewContentLoaded event

$scope.$on('$viewContentLoaded', function() {
    //call it here
    yourFunction();
});

answered Jan 19, 2015 at 4:46

Felix D.

2,2301 gold badge24 silver badges39 bronze badges

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

1 Comment

Enzey Over a year ago

It should be noted that this code should be placed into a directive and not called from a controller or a service \ etc. As the intent is to do DOM manipulation.

Enzey · Accepted Answer · 2015-01-19 07:22:27Z

0

The only way to know when Angular is done is from inside Angular. You should wrap the code that initalizes the date picker into a directive, add binding as needed, and in a $timeout function do the JS initialization.

answered Jan 19, 2015 at 7:22

Enzey

5,2541 gold badge20 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to call a javascript function after the angularjs has finished loading and page is rendered

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related