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

Answer 1

Just in case someone finds this information useful, I'm using the following workaroud.

<div ng-class="{'hide', '': ctrl.pageLoaded}">...</div>

and

.hide{display: none;}

I use this to hide all content that as angular expressions until the controller is loaded, where I set this.pageLoaded = true.

Answer 2

<div id='message'><span ng-bind="$root.initializing.status"></span></div> 

Answer 3

You can hide an expression with ngCloak, see this answer:

Prevent double curly brace notation from displaying momentarily before angular.js compiles/interpolates document

As for showing loading, you can just set $root.initializing.status to a default value of "Loading" and then reset it when you get your data.

Answer 4

Use ng-cloak directive to avoid the flicker on page load.

Answer 5

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

Answer 6

Use ng-cloak http://docs.angularjs.org/api/ng.directive:ngCloak

<div id="template1" ng-cloak>{{ 'hello' }}</div>

or ng-bind http://docs.angularjs.org/api/ng.directive:ngBind

Hello <span ng-bind="name"></span>!

https://stackoverflow.com/a/14076004/1172872