Run a javascript function when Angular has 'finished'

Question

By 'finished', I mean all data binding has completed and there's nothing left for Angular javascript to run (until a user interacts with the DOM).

I need to call a javascript function I already have (which, fwiw, simply toggles the display of a few divs).

What I've Tried

I want to try and avoid the use of timeouts:

http://blog.brunoscopelliti.com/run-a-directive-after-the-dom-has-finished-rendering/

How long angular takes is arbitrary, and depends on too much for me to accurately use time intervals.

I've also tried app.run(function().... , but it runs too early!?

EDIT (for clarification)

Think of this scenario as 2 divs.

<div class="static">SOME CONTENT</div>

and

<div class="angular">{{ someContent }}</div>

On page load (initially), the user will see {{ someContent }} until Angular has 'finished'. I want to hide this angular div, and only show the static div, and then swap them (ie static becomes hidden, and angular becomes visible), once {{ someContent }} has been rendered out. It's surely really simple what I'm trying to do, ng-show sounds like it might be a solution - but I'm unsure of how to use it.

Answer 1

If app.run(function() { ... }); is too early and you dont want to use $timeout maybe you should refactor the javascript function you want to call and do it the angular way .

If it is just to toggle divs visibility consider using ng-show / ng-hide . You can also use ng-if to conditionally remove or recreate a portion of the dom tree. It depends on the purpose of your function maybe a custom directive is suitable for your case.

Example in case you want to show some variable data once it gets populated:

<div ng-if='myVar'>
    <span>{{myVar}}</span>
</div>

Updated according to edited question:

<div ng-if='!myVar' class='static'>
    <span>STATIC CONTENT</span>
</div>
<div ng-if='myVar' class='angular'>
    <span>{{myVar}}</span>
</div>

Once again ng-show/ng-hide might work but don't forget that they only toggle the element's visibility. ng-if will remove/recreate the element if the condition is or is not verified.

Answer 2

//using ng-if
<div ng-if="!someContent" class="static">SOME CONTENT</div>
<div ng-if="someContent" class="angular">{{ someContent }}</div>

//using ng-hide/show
<div ng-hide="someContent" class="static">SOME CONTENT</div>
<div ng-show="someContent" class="angular">{{ someContent }}</div>

Answer 3

This smells like an anti-pattern. Why exactly do you want toggle those div's? The use of directives might make much more sense in the context.

Regardless, if you think you have good reason for doing this, you can schedule a function to run using $applyAsync(yourFunction) .

$applyAsync will queue the function to be executed at a later time. If you place that during the initialization of your $scope then your function will run after rest of the watchers get executed.