CODEWITHSUNDEEP
javascriptangularjs
user1017882
user1017882

Reputation:

Run a javascript function when Angular has 'finished'

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 (i.e. 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.

Upvotes: 0

Views: 125

Answers (3)

Umur Kontacı
Umur Kontacı

Reputation: 35478

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.

Upvotes: 0

Jahanzaib Aslam
Jahanzaib Aslam

Reputation: 2834

//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>

Upvotes: 0

pgrodrigues
pgrodrigues

Reputation: 2078

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.

Upvotes: 4

Related Questions