Angular JS event for page rendered with ui.router

Question

Background scenario:

I have ng-repeatone that fills my view, dynamically increasing the container <div>.

I need to adjust my height <div>when rendering is complete, and I also need to do this on every other page of my application.

I know the function well ready():

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

But this code, placed in app.js, is executed only when the page is first opened (or reloaded).

---

Important Note:
I use ui.routerto navigate my "pages", so I call `$ state.transitionTo () when I need to change the page.

---

Question: Is there an Angular event that is broadcast whenever a page is fully displayed?

Answer 1

When searching for a solution, I found that there is a ui.router event that is raised whenever the DOM is fully displayed (with every new state transformation)

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

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

I thought it might be useful to someone else,
Greetings

Answer 2

You can also use onEnter for uirouter like this,

$stateProvider
    .state('printer',
    {
        url: "/printer",
        views:
        {
            "view":
            {
                templateUrl: "/static/tpls/cloud/app/printer.php"
            }
        },
        onEnter: function(){
            try {
                window.webkit.messageHandlers.pageIn.postMessage("enter printer page");
            } catch(err) {
                console.log('The native context does not exist yet');
            }
        },
        onExit: function(){
            try {
                window.webkit.messageHandlers.pageOut.postMessage("leave printer page");
            } catch(err) {
                console.log('The native context does not exist yet');
            }
            document.getElementById('liveMovie').style.height='30px';
        }
    })