Avoiding expressions being shown on page load

Question

In an AngularJS video at one point I saw how to avoid an expression being visible before the Javascript parses it. But I can't remember how it was done...

I have a <div id='message'>{{$root.initializing.status}}</div> that I'd like to say "Loading..." before AngularJS has a chance to parse it. How can this be done?

Answer 1

As the others mentioned, use ng-cloak but also add the following to your CSS if it is the first to load in your page.

[ng\:cloak],[ng-cloak],.ng-cloak{display:none !important} 

This will ensure that your div template is hidden. Below that div template, add something like

Loading...

The assignment of the $root.initializing.status with cause a true value for ng-hide.

Here is the jsfiddle and the following is the code:

HTML:

<div ng-controller='Ctrl'>     <div id='message'>{{$root.initializing.status}}</div>     <div ng-hide="$root.initializing.status">Loading...</div> </div> 

JS:

function Ctrl($timeout, $scope) { ///simulating loading     $timeout(function () {         $scope.$root = {             initializing: {                 status: 'Complete!'             }         }     }, 2000); }