domokun domokun -4 years ago 98
AngularJS Question

Angular JS event for page rendered using ui.router

Background Scenario:

I have an

that populates my view, dynamically enlarging the

I need to adjust the height of my
when the rendering is complete, and I also need to do that on every other page of my app.

I'm well aware of the

angular.element(document).ready(function() {

But this code, put in
get executed only on the first page opening (or reloading).

Important note:

I'm using
to navigate through my "pages", so I call an `$state.transitionTo()' whenever I need to change page.

Question: Is there an Angular event that gets broadcasted whenever the page has fully rendered?

Answer Source

While looking for a solution, I've found that there is an ui.router event that gets called whenever the DOM has been fully rendered (on each new state transition)

The event is $viewContentLoaded and the syntax is pretty straight forward:

    $rootScope.$on('$viewContentLoaded', function (event) {
            console.log('lock & loaded')

I thought that could be useful to someone else,

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download