angularjs - 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);
}