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?

score 37 · Accepted Answer · answered Jun 13 '13 at 18:10

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

score 16 · Answer 2 · edited May 23 '17 at 12:17

16

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

edited May 23 '17 at 12:17

Community

1
1

answered Jun 13 '13 at 15:50

sk8terboi87 ツ

3,396
3
34
45

But which one is better? – pkk Apr 26 '17 at 05:45
1

@pkk: For show and hide necessity, ngCloak. In case of using element as placeholder, go for ng-bind – sk8terboi87 ツ Apr 26 '17 at 07:36

score 2 · Answer 3 · answered Nov 25 '15 at 12:12

2

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

answered Nov 25 '15 at 12:12

waqas jamil

423
3
9

score 1 · Answer 4 · edited May 23 '17 at 10:31

1

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.

edited May 23 '17 at 10:31

Community

1
1

answered Jun 13 '13 at 15:52

Ryan Quinn

1,175
1
15
28

That doesn't work for me, I'm still seeing `{{myvar}}` flash on the page. – Ben Jun 13 '13 at 17:36

score 1 · Answer 5 · edited Jul 11 '15 at 14:18

1

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

edited Jul 11 '15 at 14:18

Ionic

3,884
1
12
33

answered Jul 11 '15 at 04:42

Umar Adil

5,128
6
29
47

score 0 · Answer 6 · answered Jul 22 '15 at 12:04

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.

Avoiding expressions being shown on page load

6 Answers6

Linked