0

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.

ricksmt
  • 888
  • 2
  • 13
  • 34
  • What page unloading? Are you using views and have issues when unloading the page or what? Provide the problematic code and explain it in greater detail. – Aleksandar Bencun Feb 24 '16 at 19:10
  • As stated, I'm having trouble replicating the issue in a smaller sample. It is within an ngView. – ricksmt Feb 24 '16 at 19:15
  • So, basically uncompiled expressions are shown when you are changing the view, but on the view that's being unloaded. Which IE version is creating the problem? – Aleksandar Bencun Feb 24 '16 at 19:24
  • I'm viewing it with IE 11. Changing the view doesn't cause the issue, so navigating around the app isn't a problem. The issue only appears when refreshing. – ricksmt Feb 24 '16 at 19:26
  • It depends on how you're reloading the view. If you are forcefully refreshing the whole view by navigating to the URL of the view again then you can probably simply switch some boolean variable on the `$rootScope` prior to loading the URL and use ng-show to hide the view and then switch the boolean again when the view is loaded. – Aleksandar Bencun Feb 24 '16 at 21:29
  • I'm talking about the browser refresh. I think you're thinking I'm refreshing the page in AngularJS/JavaScript which is not the case. – ricksmt Feb 24 '16 at 21:47

1 Answers1

0

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.

halfer
  • 19,824
  • 17
  • 99
  • 186
danday74
  • 52,471
  • 49
  • 232
  • 283