CODEWITHSUNDEEP
angularjsinternet-explorerngcloak
ricksmt
ricksmt

Reputation: 899

AngularJS: Expressions visible when IE unloads

I've run into a problem where refreshing an AngularJS page in IE shows the uncompiled AngularJS. I can use ngCloak to hide the uncompiled expressions when loading, but I can't find anything for when the page unloads. I can use ngBind instead of an expression, and then the expressions disappear instead of displaying raw, but I'm hoping for a better solution. Any ideas?

I'm still working on a demo where you can see the issue; I think the iframes used to display results in code snippets and stuff like JSFiddle are preventing me from replicating the problem.

Upvotes: 0

Views: 326

Answers (1)

danday74
danday74

Reputation: 57036

A few tips that may or may not help.

Contrary to common advice, load Angular in head of document. That way when you hit an ng-if during page load, the browser knows what to do with it. If it's in footer ng-if is meaningless until page is loaded and thus elements flash up and then disappear during page load

Use class .ng-cloak as you are doing already.

Use booleans in controller to dictate when to display elements. E.g. 

<section ng-if='controller.loading === false'>

you could place some of or your entire markup for a view in such a div to remove elements until they are ready for display

Play with ng-if ng-show and ng-hide, ng-if actually removes elements from the DOM whereas the other two just show or hide. They can produce very different results in terms of smoothness of page loading.

Where you use an expressions on an ng-if, be careful to ensure the expression is very accurate. Don't be sloppy with the expression. Consider what would happen if the var in the expression was undefined. Would your element show when you don't want it to?

Whilst I haven't directly dealt with unloading these same concepts can be applied.

Upvotes: 0

Related Questions