Angular JS event for page rendered using ui.router

angular-ui-router, angularjs, javascript

Solution

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

Problem

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?

Original source