domokun domokun -4 years ago 98
AngularJS Question

Angular JS event for page rendered using ui.router

Background Scenario:

I have an

ng-repeat
that populates my view, dynamically enlarging the
<div>
container.

I need to adjust the height of my
<div>
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
ready()
function:

angular.element(document).ready(function() {
console.log('ready')
})


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


Important note:

I'm using
ui.router
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,
Cheers

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