0

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.

Improve this question
5
  • It really depends on what exactly you mean by angular finishing. Because angular really never finishes, it is constantly running its digest cycle. EVery process has different specs, so you cannot simply catch when everything finishes (at least not that I know of). But I know there are couple of custom directives for ng-repeat and ng-bind that emit events to let you know it had finished (you catch them by $scope.$on() ) - not ideal though... Commented Jun 9, 2015 at 13:13
  • Ah I see, ok. Well, to be more specific, my problem is that whilst angular is doing what it does, I have the following exposed in the dom: {{ variableName }} which will then (when completed), be swapped out for variableValue, for example. Once this part has finished, I want to be able to show what it is that Angular just dealt with. I'm basically hiding the ugliness in the DOM until Angular has finished binding. Commented Jun 9, 2015 at 13:16
  • I am not sure if I follow completely but it dows sound like you should be using ng-show and ng-hide. Some example would be really good, because it sounds to me like you are not waiting for angular to finish something but some other action, maybe promise or ajax request. Can you setup simple fiddle to show what you trying to achieve? Commented Jun 9, 2015 at 13:19
  • Still not 100% sure what are you "waiting" for angular to finish, because everything is pretty insant, but I think ng-if will be the way to go. Check @user3632710 answer Commented Jun 9, 2015 at 13:30
  • It's not instant enough unfortunately. I can see the likes of {{ some content }} prior to Angular finishing the binding, and so can Google (the bigger problem). Commented Jun 9, 2015 at 13:31

3 Answers 3

Reset to default
4

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Please see edit for what I'm trying to achieve, a better explanation. Thanks for your answer. +1.
0 
//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>
Improve this answer

Comments

0

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.

Improve this answer

1 Comment

I want to toggle the divs because I'm new to Angular, so probably falling victim to the XY problem here (admittedly). What I'm trying to get at is that I'm not happy with the DOM looking as it looks prior to Angular taking care of the bindings.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.